如何使用 jquery ajax php 上传文件答案

【问题标题】：How to upload file using jquery ajax php如何使用 jquery ajax php 上传文件
【发布时间】：2014-07-05 21:12:26
【问题描述】：

我有一个使用 jquery 的formdata 的文件上传系统事情是这样的--->

HTML

<form id="upload-form" method="post" enctype="multipart/form-data"   action="resource/php/upload.php">
    <input style="display:none;" type="file" id="upload" multiple>  
    </form>

JQUERY

$('#upload').change(function(e){

var formdata = new FormData(),file;
$('#ajax-loader').show();   //simple gif loader
    for(var i=0;i<this.files.length;i++){
        file = this.files[i];
            var ftype = file.type;
                formdata.append("files[]", file);           

    }
    if (formdata) { 
            $.ajax({
                url: "resource/php/upload.php",
                type: "POST",
                data: formdata,
                dataType : 'json',
                processData: false,
                contentType: false,
                success: function(data) {
                             $('#ajax-loader').hide();
                            //appends the currently uploaded images in  a div
                             }
                });
 }
});

PHP

//does lot of stuff
// echo's out 2 arrays in json format which is used in appending images as stated earlier^
echo json_encode(array("images"=>$db_image_id,"src"=>$db_image_src));

现在我的问题是，当我选择文件以使用#upload 自动上传文件时，#ajax-loader 会在文件上传时显示和隐藏。但我想在percentage 和ETA(time left) 中显示一个进度条来替换简单的$('#ajax-loader')。但是，我 google 了，并且能够使用 ajax-form 一个 jQuery 插件来做到这一点。但我想做更真实的事情，我不想使用任何 PLUGINS。我该怎么做？

还有一个问题是使用#upload-form 是否有必要？

【问题讨论】：

我很感激想要学习如何在没有插件的情况下做某事。如果您已经找到了一个完全符合您要求的插件，那么学习该插件的好方法就是剖析该插件。通常，如果您访问该插件的网站或 github，您可以找到包含 cmets 的完整源代码 - 并确切了解它们是如何做到的。
实际上它并不完全符合我的要求！ @Ethan 你能帮帮我吗？
我现在实际上正在乘坐游轮（我知道，我在去百慕大的路上是怎么回事？），你应该看看 html5 进度元素 - 它可能是实现目标的最简单方法。使用 js 更新您认为合适的“值”属性和样式。也许陆地上的某个人可以为您提供完整的答案？
你能展示 html5 progress 事件是如何工作的吗？因为它不适合我！但我的浏览器中有 xhr2！ @Ethan
你可以使用github.com/blueimp/jQuery-File-Upload

标签： php jquery ajax forms file-upload

【解决方案1】：

需要编写自定义的xhr函数来实现文件上传进度的跟踪

 $.ajax({
                url: "resource/php/upload.php",
                type: "POST",
                data: formdata,
                dataType : 'json',
                processData: false,
                contentType: false,
               //@custome xhr
                xhr: function() {  // custom xhr
                   myXhr = $.ajaxSettings.xhr();
                   if(myXhr.upload){ // check if upload property exists
                       myXhr.upload.addEventListener('progress',progressHandlingFunction,  false); // for handling the progress of the upload
                   }
                   return myXhr;
                },
               //@custome xhr end
                success: function(data) {
                             $('#ajax-loader').hide();
                            //appends the currently uploaded images in  a div
                             }
                });

查看上面代码中@custome xhr 的注释并添加更新进度条的功能

function updateProgress(evt) {
    console.log('updateProgress');
    if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            console.log(percentComplete);
    } else {
            // Unable to compute progress information since the total size is unknown
            console.log('unable to complete');
    }
}

参考：https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest

【讨论】：