兼容ie的jqueryajax⽂件上传
Ajax⽂件上传插件很多，但兼容性各不⼀样，许多是对ie不兼容的，另外项⽬中是要求将⽹页内容嵌⼊到桌⾯端应⽤的，这样就不允许带flash的上传插件了，如：jquery uploadify。。。悲剧
对于Ajax⽂件上传，⼤体是有：
  1、创建⼀个input type="file" 的⽂件上传按钮，根据其id监听绑定其change事件，在事件中⽤jquery创建⼀个iframe，嵌⼊添加隐藏form，同时创建input
type="file"，id相同的⽂件上传按钮，并传⼊其他需要提交的数据，然后提交，提交完成后移除⼀个input type="file"，这样⽤bind或on的绑定就对新的input 框失效，需要重新再绑定⼀次change事件，以前的jquery是可以使⽤live函数代替的，现在只能在⽂件上传成功后再绑定⼀次change事件。
1 $(function() {
2    uploadFile("fileData",'del.LiveCourse','',"CI");
3 });
4
5 function uploadFile(id,classFullName,jsonStrValue,preFileName){
6    $("#"+id).on("change", function(){
7        // 上传⽅法
8        $.ajaxFileUpload({
9            url:$("#"+id).attr("data-url-upload"),            //需要链接到服务器地址
10            secureuri:false,
11            type:"post",
12            fileElementId:id,                        //⽂件选择框的id属性
13            dataType: 'json',
14            data:{
15                "classFullName":classFullName,
16                "jsonStrValue":"",
17                "preFileName":preFileName
18            },
19            //服务器返回的格式，可以是json
20            success: function (data, status){          //相当于java中try语句块的⽤法
21                $("#courseIconImg").attr("src",$(".ctx").val()+"/images/img-class.png");
22                alert("hello");
23                //先将原有的上传展⽰清除
24                $("#" + id).nextAll("span").remove();
25                $("#courseIcon").val(data.outputFileName);
26 //                    $("#coursewareFile").val(data.outputFileName);
27                    var uploadHtml = "<span id='"+data.outputPreFileName+"_livelesson_div' style='color:#FFFFFF;'>";
28                    uploadHtml +=  data.fileUploadName ;
29                    uploadHtml += "<a  name='_LIVELESSON_PRIVIEW'> ；预览  </a><a  name='_LIVELESSON_DEL'> ；删除 </a>";
30                    uploadHtml += "</span>";
31 //                    $("#"+id).parents("li").append(uploadHtml);
32                    uploadFile("fileData",'del.LiveCourse','',"CI");
33            },
34            error: function (data, status, e)    //相当于java中catch语句块的⽤法
35            {
36                alert(e);
37            }
38        });
39    });
40    return false;
41 }
View Code
  2、创建⼀个 input type="file"的按钮，监听其click事件，然后创建iframe，隐藏form，隐藏form⾥有个 input type="file"的⽂件上传框，模拟点击click，弹出⽂件选择框，选择完⽂件后上传。此⽅法在ie下会报 “权限不⾜” 问题。
下⾯是ajaxFileUpload 插件
d({
2
3    handleError: function(s, xhr, status, e) {
4        // If a local callback was specified, fire it
5        if (s.error) {
6            s.error.t || window, xhr, status, e);
7        }
8
9        // Fire the global callback
10        if (s.global) {
11            (s.context ? t) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
12        }
13    },
14    createUploadIframe: function(id, uri)
15    {
16            //create frame
17            var frameId = 'jUploadFrame' + id;
18            var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" ';
19            if(window.ActiveXObject)
20            {
21                if(typeof uri== 'boolean'){
22                    iframeHtml += ' src="' + 'javascript:false' + '"';
23
24                }
25                else if(typeof uri== 'string'){
26                    iframeHtml += ' src="' + uri + '"';
27
28                }
29            }
30            iframeHtml += ' />';
31            jQuery(iframeHtml).appendTo(document.body);
32
33            return jQuery('#' + frameId).get(0);
34    },
35    createUploadForm: function(id, fileElementId, data)
36    {
37        //create form
38        var formId = 'jUploadForm' + id;
39        var fileId = 'jUploadFile' + id;
40        var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
41        if(data)
42        {
43            for(var i in data)
44            {
45                jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
kafka安装完整步骤46            }
47        }
48        var oldElement = jQuery('#' + fileElementId);
49        var newElement = jQuery(oldElement).clone();
50        jQuery(oldElement).attr('id', fileId);
51        jQuery(oldElement).before(newElement);
52        jQuery(oldElement).appendTo(form);
53
54
55
56        //set attributes
57        jQuery(form).css('position', 'absolute');
58        jQuery(form).css('top', '-1200px');
59        jQuery(form).css('left', '-1200px');
60        jQuery(form).appendTo('body');
61        return form;
62    },
63
64    ajaxFileUpload: function(s) {
65        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
66        s = d({}, jQuery.ajaxSettings, s);
67        var id = new Date().getTime()
68        var form = ateUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
69        var io = ateUploadIframe(id, s.secureuri);
70        var frameId = 'jUploadFrame' + id;
71        var formId = 'jUploadForm' + id;
72        // Watch for a new set of requests
73        if ( s.global && ! jQuery.active++ )
74        {
75            igger( "ajaxStart" );
76        }
77        var requestDone = false;
78        // Create the request object
79        var xml = {}
80        if ( s.global )
81            igger("ajaxSend", [xml, s]);
82        // Wait for a response to come back
83        var uploadCallback = function(isTimeout)
84        {
85            var io = ElementById(frameId);
86            try
87            {
88                tWindow)
89                {
90                      sponseText = io.contentWindow.document.tWindow.document.body.innerHTML:null;
91                      sponseXML = io.contentWindow.document.tWindow.document.tWindow.document;
92
93                }else tDocument)
94                {
95                      sponseText = io.contentDocument.document.tDocument.document.body.innerHTML:null;
96                    sponseXML = io.contentDocument.document.tDocument.document.tDocument.document;
97                }
98            }catch(e)
99            {
100                jQuery.handleError(s, xml, null, e);
101            }
102            if ( xml || isTimeout == "timeout")
103            {
104                requestDone = true;
105                var status;
106                try {
107                    status = isTimeout != "timeout" ? "success" : "error";
108                    // Make sure that the request was successful or notmodified
109                    if ( status != "error" )
110                    {
111                        // process the data (runs the xml through httpData regardless of callback)
112                        var data = jQuery.uploadHttpData( xml, s.dataType );
113                        // If a local callback was specified, fire it and pass it the data
114                        if ( s.success )
115                            s.success( data, status );
116
117                        // Fire the global callback
118                        if( s.global )
119                            igger( "ajaxSuccess", [xml, s] );
120                    } else
121                        jQuery.handleError(s, xml, status);
122                } catch(e)
123                {
124                    status = "error";
125                    jQuery.handleError(s, xml, status, e);
126                }
127
128                // The request was completed
129                if( s.global )
130                    igger( "ajaxComplete", [xml, s] );
131
132                // Handle the global AJAX counter
133                if ( s.global && ! --jQuery.active )
134                    igger( "ajaxStop" );
135
自学教程 资源136                // Process result
137                if ( splete )
138                    splete(xml, status);
139
140                jQuery(io).unbind()
141
142                setTimeout(function()
143                                    {    try
144                                        {
145                                            jQuery(io).remove();
146                                            jQuery(form).remove();
147前端map遍历
148                                        } catch(e)
attribute短语149                                        {
150                                            jQuery.handleError(s, xml, null, e);
151                                        }
152
153                                    }, 100)
154
155                xml = null
156
157            }
158        }
159        // Timeout checkercppcheck怎么用
160        if ( s.timeout > 0 )jquery下载文件插件
161        {
162            setTimeout(function(){
163                // Check to see if the request is still happening
164                if( !requestDone ) uploadCallback( "timeout" );
165            }, s.timeout);
166        }
167        try
168        {
169
170            var form = jQuery('#' + formId);
171            jQuery(form).attr('action', s.url);
172            jQuery(form).attr('method', 'POST');
173            jQuery(form).attr('target', frameId);
174            ding)
175            {
176                jQuery(form).attr('encoding', 'multipart/form-data');                  177            }
178            else
179            {
180                jQuery(form).attr('enctype', 'multipart/form-data');            181            }
182            jQuery(form).submit();
183
184        } catch(e)
185        {
186            jQuery.handleError(s, xml, null, e);
187        }
188
189        jQuery('#' + frameId).load(uploadCallback    );
190        return {abort: function () {}};
191
192    },
193
194    uploadHttpData: function( r, type ) {
195        var data = !type;
196        data = type == "xml" || data ? r.responseXML : r.responseText; 197        // If the type is "script", eval it in global context
198        if ( type == "script" )
199            jQuery.globalEval( data );
200        // Get the JavaScript object, if JSON is used.
201        if (type == "json"){
202            if (data.indexOf("<") >= 0) {
203                data = jQuery.parseJSON(jQuery(data).text()); 204            }
205            else {
206                eval("data = " + data);  /*Bug  fixed by under */ 207            }
208          }
209        // evaluate scripts within html
210        if ( type == "html" )
211            jQuery("<div>").html(data).evalScripts();
212
213        return data;
214    }
215 })
View Code

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。