zoukankan      html  css  js  c++  java
  • AJaxFileUpload 文件上传<pre>,json字符串为空解决方法

    View页面 的JS代码 其中返回值要进行序列号 dataType要大写

        <script type="text/javascript">
           function ajaxFileUpload(){
                    $.ajaxFileUpload({
                        url: '/FileUpload/Index', //用于文件上传的服务器端请求地址
                        secureuri: false, //是否需要安全协议,一般设置为false
                        fileElementId: 'fileName', //文件上传域的ID
                        dataType: 'JSON', //返回值类型 一般设置为JSON
                        success: function (data, status)  //服务器成功响应处理函数
                        {
                           var datas = $.parseJSON(data)//此处一定要序列化
                           $("#img_url").val(datas.img_url);
                            
                        },
                        error: function (data)//服务器响应失败处理函数
                        {
                            alert(data.img_url);
                        }
                    }
                )
                    return false;
    }
        </script>
    

     ajaxFileUpload代码

    jQuery.extend({
        createUploadIframe: function (id, uri) {
            //创建 frame
            var frameId = 'jUploadFrame' + id;
            var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
            if (window.ActiveXObject) {
                if (typeof uri == 'boolean') {
                    iframeHtml += ' src="' + 'javascript:false' + '"';
                }
                else if (typeof uri == 'string') {
                    iframeHtml += ' src="' + uri + '"';
                }
            }
            iframeHtml += ' />';
            jQuery(iframeHtml).appendTo(document.body);
            return jQuery('#' + frameId).get(0);
        },
        createUploadForm: function (id, fileElementId, data) {
            //创建 frame    
            var formId = 'jUploadForm' + id;
            var fileId = 'jUploadFile' + id;
            var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
            if (data) {
                for (var i in data) {
                    jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
                }
            }
            var oldElement = jQuery('#' + fileElementId);
            var newElement = jQuery(oldElement).clone();
            jQuery(oldElement).attr('id', fileId);
            jQuery(oldElement).before(newElement);
            jQuery(oldElement).appendTo(form);
    
            //设置属性
            jQuery(form).css('position', 'absolute');
            jQuery(form).css('top', '-1200px');
            jQuery(form).css('left', '-1200px');
            jQuery(form).appendTo('body');
            return form;
        },
    
        ajaxFileUpload: function (s) {
            s = jQuery.extend({}, jQuery.ajaxSettings, s);
            var id = new Date().getTime()
            var form = jQuery.createUploadForm(id, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data));
            var io = jQuery.createUploadIframe(id, s.secureuri);
            var frameId = 'jUploadFrame' + id;
            var formId = 'jUploadForm' + id;
            // 监控请求
            if (s.global && !jQuery.active++) {
                jQuery.event.trigger("ajaxStart");
            }
            var requestDone = false;
            // 创建请求对象
            var xml = {}
            if (s.global)
                jQuery.event.trigger("ajaxSend", [xml, s]);
            //等待一个响应返回
            var uploadCallback = function (isTimeout) {
                var io = document.getElementById(frameId);
                try {
                    if (io.contentWindow) {
                        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) {
                        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") {
                    requestDone = true;
                    var status;
                    try {
                        status = isTimeout != "timeout" ? "success" : "error";
                        //请求成功
                        if (status != "error") {
                            // 处理数据
                            var data = jQuery.uploadHttpData(xml, s.dataType);
                            if (s.success)
                                s.success(data, status);
                            // 触发全局返回
                            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);
                    }
    
                    // 请求完成
                    if (s.global)
                        jQuery.event.trigger("ajaxComplete", [xml, s]);
    
                    // 处理全局AJAX计数器
                    if (s.global && ! --jQuery.active)
                        jQuery.event.trigger("ajaxStop");
    
                    // 处理结果
                    if (s.complete)
                        s.complete(xml, status);
    
                    jQuery(io).unbind()
    
                    setTimeout(function () {
                        try {
                            jQuery(io).remove();
                            jQuery(form).remove();
    
                        } catch (e) {
                            jQuery.handleError(s, xml, null, e);
                        }
    
                    }, 100)
    
                    xml = null
    
                }
            }
            // 超时检查
            if (s.timeout > 0) {
                setTimeout(function () {
                    if (!requestDone) uploadCallback("timeout");
                }, s.timeout);
            }
            try {
    
                var form = jQuery('#' + formId);
                jQuery(form).attr('action', s.url);
                jQuery(form).attr('method', 'POST');
                jQuery(form).attr('target', frameId);
                if (form.encoding) {
                    jQuery(form).attr('encoding', 'multipart/form-data');
                }
                else {
                    jQuery(form).attr('enctype', 'multipart/form-data');
                }
                jQuery(form).submit();
    
            } catch (e) {
                jQuery.handleError(s, xml, null, e);
            }
    
            jQuery('#' + frameId).load(uploadCallback);
            return { abort: function () { } };
    
        },
    
        uploadHttpData: function (r, type) {
            var data = !type;
            data = type == "xml" || data ? r.responseXML : r.responseText;
            if (type == "script")
                jQuery.globalEval(data);
            if (type == "json") {
                data = r.responseText;
                var start = data.indexOf(">");
                if (start != -1) {
                    var end = data.indexOf("<", start + 1);
                    if (end != -1) {
                        data = data.substring(start + 1, end);
                    }
                }
                eval("data = " + data);
                //data = jQuery.parseJSON(jQuery(data).text());
            }
            if (type == "html")
                jQuery("<div>").html(data).evalScripts();
            return data;
        },
        handleError: function (s, xhr, status, e) {
            // If a local callback was specified, fire it
            if (s.error) {
                s.error.call(s.context || s, xhr, status, e);
            }
    
            // Fire the global callback
            if (s.global) {
                (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
            }
        }
    
    })
    

     后台Controller代码

        public class FileUploadController : Controller
        {
            //
            // GET: /FileUpload/
            [HttpPost]
            public JsonResult Index()
            {
                StringBuilder info = new StringBuilder();
                foreach (string file in Request.Files)
                {
                    HttpPostedFileBase postFile = Request.Files[file];//get post file   
                    if (postFile.ContentLength == 0)
                    {
                        continue;
                    }
                    string name = DateTime.Now.ToFileTime().ToString();
                    string fileExrensio = System.IO.Path.GetExtension(Request.Files[file].FileName).ToLower();
                    string newFilePath = System.Web.HttpContext.Current.Server.MapPath("/upload/");//save path   
                    postFile.SaveAs(newFilePath + name + fileExrensio);//save file   
                    info.Append("/upload/" + name + fileExrensio);
                }
                return Json(new { img_url = info.ToString() }, "text/html;charset=UTF-8");//一定要制定格式
            }
    
        }
    
  • 相关阅读:
    07: mysql锁和事物隔离
    06: mysql索引查找原理及调优
    06: 字典、顺序表、列表、hash树 实现原理
    05:树结构
    02:MongoDB操作
    01:MongoDB基础
    02: CMDB设计思路
    二级制包安装Tomcat 与 RPM包安装Tomcat
    Docker的volume机制实现容器数据的持久性存储
    配置docker的私有仓库
  • 原文地址:https://www.cnblogs.com/jolab/p/4967894.html
Copyright © 2011-2022 走看看