zoukankan      html  css  js  c++  java
  • ajax file upload 修改

    先前 写过 JS 判断上传 文件 大小 后来发现一个问题, 就是单页面运行 js 没有问题, 但是基础呢个到项目中 有些时候 obj_img.dynsrc = file.value; 报错说没有 权限访问. 所以实在没有办法来获取客服端 上传 文件的大小。 于是就把文件post到服务端来获取大小了。

    官方的ajaxfileupload只能上传一个文件,这里简单修改一下可以上传多个 文件, 修改后的 code 如下:

    jQuery.extend({
        createUploadIframe: function (id, uri) {//id为当前系统时间字符串,uri是外部传入的json对象的一个参数
            //create frame
            var frameId = 'jUploadFrame' + id; //给iframe添加一个独一无二的id
            var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"'; //创建iframe元素
            if (window.ActiveXObject) {//判断浏览器是否支持ActiveX控件
                if (typeof uri == 'boolean') {
                    iframeHtml += ' src="' + 'javascript:false' + '"';
                } else if (typeof uri == 'string') {
                    iframeHtml += ' src="' + uri + '"';
                }
            }
            iframeHtml += ' />';
            jQuery(iframeHtml).appendTo(document.body); //将动态iframe追加到body中
            return jQuery('#' + frameId).get(0); //返回iframe对象
        },
        createUploadForm: function (id, fileElementIds, data) {//id为当前系统时间字符串,fileElementIds为页面<input type='file' />的id集合,datas的值需要根据传入json的键来决定
            //create form    
            var formId = 'jUploadForm' + id; //给form添加一个独一无二的id
            var fileId = 'jUploadFile' + id; //给<input type='file' />添加一个独一无二的id
            var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data" ></form>'); //创建form元素
            if (data) {//通常为false
                    for (var i in data) {
                        jQuery('<input type="hidden" name="' +  i.toString() + '" value="' + data[i] + '" />').appendTo(form); //根据data的内容,创建隐藏域
                    }
            }
            for (var i = 0; i < fileElementIds.length; i++) {
                var fileElementId = fileElementIds[i];
                var oldElement = jQuery('#' + fileElementId); //得到页面中的<input type='file' />对象
                var newElement = jQuery(oldElement).clone(); //克隆页面中的<input type='file' />对象
                jQuery(oldElement).attr('id', fileId+i.toString()); //修改原对象的id
                jQuery(oldElement).before(newElement); //在原对象前插入克隆对象
                jQuery(oldElement).appendTo(form); //把原对象插入到动态form的结尾处
            }
           
            //set attributes
            jQuery(form).css('position', 'absolute'); //给动态form添加样式,使其浮动起来,
            jQuery(form).css('top', '-1200px');
            jQuery(form).css('left', '-1200px');
            jQuery(form).appendTo('body'); //把动态form插入到body中
            return form;
        },
        ajaxFileUpload: function (s) {//这里s是个json对象,传入一些ajax的参数
            // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout        
            s = jQuery.extend({}, jQuery.ajaxSettings, s); //此时的s对象是由jQuery.ajaxSettings和原s对象扩展后的对象
            var id = new Date().getTime(); //取当前系统时间,目的是得到一个独一无二的数字
            var form = jQuery.createUploadForm(id, s.fileElementIds, (typeof (s.data) == 'undefined' ? false : s.data)); //创建动态form
            var io = jQuery.createUploadIframe(id, s.secureuri); //创建动态iframe
            var frameId = 'jUploadFrame' + id; //动态iframe的id
            var formId = 'jUploadForm' + id; //动态form的id
            // Watch for a new set of requests
            if (s.global && !jQuery.active++) {//当jQuery开始一个ajax请求时发生
                jQuery.event.trigger("ajaxStart"); //触发ajaxStart方法
            }
            var requestDone = false; //请求完成标志
            // Create the request object
            var xml = {};
            if (s.global)
                jQuery.event.trigger("ajaxSend", [xml, s]); //触发ajaxSend方法
            // Wait for a response to come back
            var uploadCallback = function (isTimeout) {//回调函数
                var io = document.getElementById(frameId); //得到iframe对象
                try {
                    if (io.contentWindow) {//动态iframe所在窗口对象是否存在
                        xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
                        xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;
                    } else if (io.contentDocument) {//动态iframe的文档对象是否存在
                        xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
                        xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
                    }
                } catch (e) {
                    jQuery.handleError(s, xml, null, e);
                } if (xml || isTimeout == "timeout") {//xml变量被赋值或者isTimeout == "timeout"都表示请求发出,并且有响应
                    requestDone = true; //请求完成
                    var status; try {
                        status = isTimeout != "timeout" ? "success" : "error"; //如果不是“超时”,表示请求成功
                        // Make sure that the request was successful or notmodified
                        if (status != "error") {                        // process the data (runs the xml through httpData regardless of callback)
                            var data = jQuery.uploadHttpData(xml, s.dataType); //根据传送的type类型,返回json对象,此时返回的data就是后台操作后的返回结果
                            // If a local callback was specified, fire it and pass it the data
                            if (s.success)
                                s.success(data, status); //执行上传成功的操作
                            // Fire the global callback
                            if (s.global)
                                jQuery.event.trigger("ajaxSuccess", [xml, s]);
                        } else
                            jQuery.handleError(s, xml, status);
                    } catch (e) {
                        status = "error";
                        jQuery.handleError(s, xml, status, e);
                    }                // The request was completed
                    if (s.global)
                        jQuery.event.trigger("ajaxComplete", [xml, s]);                // Handle the global AJAX counter
                    if (s.global && ! --jQuery.active)
                        jQuery.event.trigger("ajaxStop");                // Process result
                    if (s.complete)
                        s.complete(xml, status);
                    jQuery(io).unbind();//移除iframe的事件处理程序
                    setTimeout(function () {//设置超时时间
                        try {
                            jQuery(io).remove();//移除动态iframe
                            jQuery(form).remove();//移除动态form
                        } catch (e) {
                            jQuery.handleError(s, xml, null, e);
                        }
                    }, 100)
                    xml = null
                }
            }        // Timeout checker
            if (s.timeout > 0) {//超时检测
                setTimeout(function () {                // Check to see if the request is still happening
                    if (!requestDone) uploadCallback("timeout");//如果请求仍未完成,就发送超时信号
                }, s.timeout);
            } try {
                var form = jQuery('#' + formId);
                jQuery(form).attr('action', s.url);//传入的ajax页面导向url
                jQuery(form).attr('method', 'POST');//设置提交表单方式
                jQuery(form).attr('target', frameId);//返回的目标iframe,就是创建的动态iframe
                if (form.encoding) {//选择编码方式
                    jQuery(form).attr('encoding', 'multipart/form-data');
                } else {
                    jQuery(form).attr('enctype', 'multipart/form-data');
                }
                jQuery(form).submit();//提交form表单
            } catch (e) {
                jQuery.handleError(s, xml, null, e);
            }
            jQuery('#' + frameId).load(uploadCallback); //ajax 请求从服务器加载数据,同时传入回调函数
            return { abort: function () { } };
        },
        uploadHttpData: function (r, type) {
            var data = !type;
            data = type == "xml" || data ? r.responseXML : r.responseText;        // If the type is "script", eval it in global context
            if (type == "script")
                jQuery.globalEval(data);        // Get the JavaScript object, if JSON is used.
            if (type == "json")
                eval("data = " + data);        // evaluate scripts within html
            if (type == "html")
                jQuery("<div>").html(data).evalScripts(); return data;
        }
    })

    调用示例:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script src="jquery-1.7.1.js" type="text/javascript"></script>
        <script src="ajaxfileupload2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $(":button").click(function () {
                    ajaxFileUpload();
                })
            })
            function ajaxFileUpload() {
                $.ajaxFileUpload
                (
                    {
                        url: '/upload.aspx', //用于文件上传的服务器端请求地址
                        secureuri: false, //一般设置为false
                        fileElementIds: ['file1', 'file2', 'file3', 'file4'], //文件上传空间的id属性  <input type="file" id="file" name="file" />
                        data: { file1DataSize: 0, file12DataSize: 0, file3DataSize: 0, file4DataSize: 0 },//可选属性, 一般和fileElementIds个数 相同
                        dataType: 'json', //返回值类型 一般设置为json
                        success: function (data, status)  //服务器成功响应处理函数
                        {
                            //$("#img1").attr("src", data.imgurl);
                            //if (typeof (data.error) != 'undefined') {
                            //    if (data.error != '') {
                            //        alert(data.error);
                            //    } else {
                            //        alert(data.msg);
                            //    }
                            //}
                            alert(data[0].DataSize);
                        },
                        error: function (data, status, e)//服务器响应失败处理函数
                        {
                            alert(e);
                        }
                    }
                )
                return false;
            }
        </script>
    </head>
    <body>
        <p><input type="file" id="file1" name="file" /></p>
          <p><input type="file" id="file2" name="file" /></p>
          <p><input type="file" id="file3" name="file" /></p>
          <p><input type="file" id="file4" name="file" /></p>
        <input type="button" value="上传" />
        <p><img id="img1" alt="" src="" /></p>
    </body>
    </html>
    using System;
    using System.Collections.Generic;
    
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.IO;
    namespace jQueryAJAXFileUpload
    {
        public partial class upload : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                HttpFileCollection files = Request.Files;//这里只能用<input type="file" />才能有效果,因为服务器控件是HttpInputFile类型
                if (files.Count > 0)
                {
                    string res = "";
                    for (int i = 0; i < files.Count; i++)
                    {
                        if (files[i].ContentLength > 0)
                        {
                            var item = files[i];
                            string postData = string.Empty;
                            string key = "file" + (i + 1).ToString() + "DataSize";
                            postData = Request.Form[key];
    
                            string newfilePath = Server.MapPath("/") + System.IO.Path.GetFileName(item.FileName);
                            if (File.Exists(newfilePath))
                            {
                                File.Delete(newfilePath);
                            }
                            item.SaveAs(newfilePath);
                            string msg = " 成功! 文件大小为:" + item.ContentLength;
                            if(res.Length>0)
                            {
                                res+=",";
                            }
                            res += "{ PostData:'" + postData + "', msg:'" + msg + "',DataSize:'" + item.ContentLength + "'}";
                        }
                    }
                    Response.Write("["+res+"]");
                    Response.End();
                }
            }
        }
    }
  • 相关阅读:
    进程池,线程池,协程,gevent模块,协程实现单线程服务端与多线程客户端通信,IO模型
    线程相关 GIL queue event 死锁与递归锁 信号量l
    生产者消费者模型 线程相关
    进程的开启方式 进程的join方法 进程间的内存隔离 其他相关方法 守护进程 互斥锁
    udp协议 及相关 利用tcp上传文件 socketserver服务
    socket套接字 tcp协议下的粘包处理
    常用模块的完善 random shutil shevle 三流 logging
    day 29 元类
    Django入门
    MySQL多表查询
  • 原文地址:https://www.cnblogs.com/majiang/p/5130034.html
Copyright © 2011-2022 走看看