无废话,直接重点:
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>
时间: 2024-10-08 02:59:19