PHP Upload ajax of miscellaneous files without submit [duplicate]

Navigation
2

I need to upload without leaving the page, I believe the best would be ajax, correct?

I found some posts here in SOpt, but I could not adapt my need.

I need to send these two fields, one for file and one for hidden text. 

<input type="file" id="id-input-file-2" name="arquivo" class="form-control arquivo" />
<input type="hidden" name="onde" id="onde" value="cotacao">

. 

$(".listaArquivo").click(function () {
    var formData = new FormData(this);
    var arquivo = $(".arquivo").val();
    var onde = $("#onde").val();

    $.ajax({
        url: 'cotacoesEditarUpload.php',
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false,
        xhr: function() {  // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { // Avalia se tem suporte a propriedade upload
                myXhr.upload.addEventListener('progress', function () {
                    /* faz alguma coisa durante o progresso do upload */
                }, false);
            }
        return myXhr;
        }
    });
});

I do not want to use button, just select and send.

    
asked by anonymous 04.09.2015 / 18:46

1 answer

1

Drag Drop API:

by: devbridge

Works under:

  • IE10 +
  • Firefox 15 +
  • Chrome 22 +
  • Safari 6 +
  • Opera 12 +

You'll get these features:

HTML:

<divclass="body">
        <div>
            <h1>HTML5 Ajax Uploader</h1>
        </div>

        <div id="dragndropimage" class="uploadimage-dragndrop">
            <div class="uploadimage-text">Arraste as imagens aqui/div>
            <div>Ou, se preferir</div>
            <div class="uploadimage-input">
                <input type="file" multiple="multiple" name="uploadFiles" id="upload-input" />
            </div>
        </div>

        <div id="upload-liveuploads" data-bind="template: { name: 'template-uploads' }"></div>

API Script: 

        <script type="text/html" id="template-uploads">
            <div data-bind="visible: showTotalProgress()">
                <div>
                    <span data-bind="text: uploadSpeedFormatted()"></span>
                    <span data-bind="text: timeRemainingFormatted()" style="float: right;"></span>
                </div>
                <div class="uploadimage-totalprogress">
                    <div class="uploadimage-totalprogressbar" style="width: 0%;" data-bind="style: { width: totalProgress() + '%' }"></div>
                </div>
            </div>
            <div data-bind="foreach: uploads">
                <div class="uploadimage-upload" data-bind="css: { 'uploadimage-uploadcompleted': uploadCompleted() }">
                    <div class="uploadimage-fileinfo">
                        <strong data-bind="text: fileName"></strong>
                        <span data-bind="text: fileSizeFormated"></span>
                        <span class="uploadimage-progresspct" data-bind="visible: uploadProgress() < 100"><span data-bind="text: uploadSpeedFormatted()"></span></span>
                    </div>
                    <div class="uploadimage-progress">
                        <div class="uploadimage-progressbar" style="width: 0%;" data-bind="style: { width: uploadProgress() + '%' }"></div>
                    </div>
                </div>
            </div>
        </script>


        <script type="text/javascript" data-main="/scripts/main" src="/Scripts/require.js"></script>

    </div>
  

This is a perfect API for your need. You can drag an image or select AUTOMATICALLY to upload it.

COMPLETE DOWNLOAD

    
04.09.2015 / 20:06
Ionic's Apk does not work. White screen CSS form diagonally without warping the letter together