码迷,mamicode.com
首页 > 其他好文 > 详细

ajax 无刷新文件上传

时间:2014-09-17 18:07:42      阅读:158      评论:0      收藏:0      [点我收藏+]

标签: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 无刷新文件上传

标签:style   blog   io   java   ar   文件   div   sp   cti   

原文地址:http://www.cnblogs.com/shi-meng/p/3977489.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!