ajax 无刷新文件上传

无废话，直接重点：

1：准备工作  需要4个js库

　　1、jquery 8以上版本

　　2、jquery.ui.widget.js

　　3、jquery.iframe-transport.js

　　4、jquery.fileupload.js

　　注意，引用需要按照先后顺序来做，

2:html中必须包含一个上传的标签，写法如下，可以直接复制到html文件中

　　<input id="fileupload" type="file" name="files[]" data-url="@Url.Action("upload","home")" multiple>

　　data-url 为上传的服务路径，可以跟需要修改

 

3：开始上传

<script>
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'text',
            add: function (e, data) {
                data.context = $('<p/>').text('Uploading...').appendTo(document.body);
                data.submit();
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .bar').css(
                    'width',
                    progress + '%'
                );
            },
            done: function (e, data) {
                //$.each(data.result.files, function (index, file) {
                $('#imgDialog img').attr('src', data.result);
                //});
                $(img).attr('src', data.result);
            }
        });
    });
</script>

  　　有不同的参数代表着上传的过程中的不同事件，上面代码需要加一个进度条的div

　　<div id="progress">
        <div class="bar" style="width: 0%;"></div>
    </div>