ajax 無重新整理檔案上傳

標籤：style   blog   io   java   ar   檔案   div   sp   cti   

無廢話，直接重點：

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>

ajax 無重新整理檔案上傳