zoukankan      html  css  js  c++  java
  • 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=" 0%;"></div>
        </div>

  • 相关阅读:
    作业3
    字符串的应用
    java类与对象
    作业
    水仙花数
    java例
    读书笔记(构建之法-11.19)
    补psp进度(11月4号-9号)
    PSP进度(11~16)
    团队项目-约跑软件需求规格说明书
  • 原文地址:https://www.cnblogs.com/shi-meng/p/3977489.html
Copyright © 2011-2022 走看看