PHP Upload ajax of miscellaneous files without Submit

Question

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

I found some post here on Sopt, but I could not adapt my need.

I need to send these two fields, one of file and the other of 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;
        }
    });
});

How to do as soon as the file is selected whatever, is sent via ajax including the hidden field?

I don’t want to use button, just select and send.

Answer 1

Drag Drop API:

for: devbridge

Works in:

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

You’ll get these features:

HTML:

    <div class="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 which AUTOMATICALLY the upload will be performed.

FULL DOWNLOAD