jsp页面通过ajax上传多张图片

最新推荐文章于 2021-08-05 12:54:34 发布

one_isi_all

最新推荐文章于 2021-08-05 12:54:34 发布

阅读量4.8k

点赞数 1

分类专栏： java基础 html ajax

本文链接：https://blog.csdn.net/one_isi_all/article/details/46610089

版权

这篇博客介绍了如何在jsp页面中利用Ajax技术上传多张图片，主要依赖于ajaxfileupload.js这个JavaScript库。内容包括引入js文件以及相关的使用方法。

摘要由CSDN通过智能技术生成

所需js文件ajaxfileupload.js

ajaxfileupload.js

j Query.extend({
           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 ]);
               }
           },

           createUploadIframe : function(id, uri) {
               // create 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) {
               // create form
               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);

               // set attributes
               jQuery(form).css('position', 'absolute');
               jQuery(form).css('top', '-1200px');
               jQuery(form).css('left', '-1200px');
               jQuery(form).appendTo('body');
               return form;
           },

           ajaxFileUpload : function(s) {
               // TODO introduce global settings, allowing the client to modify
               // them for all requests, not only timeout
               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;
               // Watch for a new set of requests
               if (s.global && !jQuery.active++) {
                   jQuery.event.trigger("ajaxStart");
               }
               var requestDone = false;
               // Create the request object
               var xml = {};
               if (s.global)
                   jQuery.event.trigger("ajaxSend", [ xml, s ]);
               // Wait for a response to come back
               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";
                           // Make sure that the request was successful or
                           // notmodified
                           if (status != "error") {
                               // process