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>

  • 相关阅读:
    Win32C++调用C#(一):开篇
    C#+ICE+TCP通信=数据传输
    第一章 程序设计和C语言
    第一章 HTML5,CSS3及响应式设计入门恢复
    第一章 程序设计和C语言
    HTTP状态码
    HTML 实践
    HTML基础
    创建HTML文件与建立HTML格式
    HTML标签
  • 原文地址:https://www.cnblogs.com/shi-meng/p/3977489.html
Copyright © 2011-2022 走看看