欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

图片上传（支持多张）——java 【解决（图片上传成功，ajax请求仍会返回错误）】

程序员文章站 2022-06-23 08:28:56
图片上传（支持多张）html端主要代码//
图片上传（支持多张）
html端主要代码
// 主要代码
<form id="iForm" enctype="multipart/form-data">	
                          
	<input type="file" multiple="multiple" id="file"  name="fileupload"  onchange="uploadHeadImg_pic(this)">	                         
 
 </form>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript" src="js/pic_upload.js"></script>
所引用的js：ajaxfileupload.js
//  ajaxfileupload.js

jQuery.extend({
	//2013-06-19 Etoak_james 增加函数handleError 解决jQuery.handleError is not a function异常
	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;
            
            if(window.ActiveXObject) {
                var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
                if(typeof uri== 'boolean'){
                    io.src = 'javascript:false';
                }
                else if(typeof uri== 'string'){
                    io.src = uri;
                }
            }
            else {
                var io = document.createElement('iframe');
                io.id = frameId;
                io.name = frameId;
            }
            io.style.position = 'absolute';
            io.style.top = '-1000px';
            io.style.left = '-1000px';

            document.body.appendChild(io);

            return io;			
    },
    createUploadForm: function(id, fileElementId)
	{
		//create form	
		var formId = 'jUploadForm' + id;
		var fileId = 'jUploadFile' + id;
		var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');	
		var oldElement = $('#' + fileElementId);
		var newElement = $(oldElement).clone();
		$(oldElement).attr('id', fileId);
		$(oldElement).before(newElement);
		$(oldElement).appendTo(form);
		$(form).css('position', 'absolute');
		$(form).css('top', '-1200px');
		$(form).css('left', '-1200px');
		$(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);
		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 the data (runs the xml through httpData regardless of callback)
                    	var data = jQuery.uploadHttpData( xml, s.dataType );   
                        // 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();

                setTimeout(function()
                		{	try 
						{
							$(io).remove();
							$(form).remove();	
							
						} 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 = $('#' + formId);
			$(form).attr('action', s.url);
			$(form).attr('method', 'POST');
			$(form).attr('target', frameId);
            if(form.encoding)
			{
                form.encoding = 'multipart/form-data';				
            }
            else
			{				
                form.enctype = 'multipart/form-data';
            }			
            $(form).submit();

        } catch(e) 
		{
            jQuery.handleError(s, xml, null, e);
        }
        if(window.attachEvent){
            document.getElementById(frameId).attachEvent('onload', uploadCallback);
        }
        else{
            document.getElementById(frameId).addEventListener('load', uploadCallback, false);
        } 		
        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" ){
//        	alert(data)
         eval( "data = " + data );//
        	//经修改  原因：图片上传成功ajax请求仍会报错
        	 var data = r.responseText;
             var rx = new RegExp("<pre.*?>(.*?)</pre>","i");
             var am = rx.exec(data);
             //this is the desired data extracted
             var data = (am) ? am[1] : "";    //the only submatch or empty
//             alert(data)
             eval( "data = " + data );
        }
           
        if ( type == "html" ){
        	  jQuery("<div>").html(data).evalScripts();
        }
          
        return data;
    }
});
所引用的js：pic_upload.js
//  pic_upload.js

function uploadHeadImg_pic(obj){
	//批量上传图片
	layer.load();//添加进度条
    $.ajaxFileUpload({
         url:"/.../uploadManypic.json?query="+ +new Date().getTime(),//需要链接到服务器地址   
          secureuri:false,  
          fileElementId:"file",//文件选择框的id属性  ,//文件选择框的id属性  
          dataType: 'json',   //json 
          contentType: false,    //不可缺
         processData: false,    //不可缺
        success: function (data){
        	 layer.closeAll('loading'); //关闭进度条
        	 
        	 //图片信息list集合
        	//alert("个数"+data.list.length)
  
        },
        error:function(error){
        	
            layer.closeAll('loading'); //关闭进度条
            lalert('网络原因操作失败！','error');
        }
    });
}
后端java代码：
//  uploadManypic.json

@RequestMapping("/uploadManypic.json")
	public @ResponseBody JSONMap<String,Object>  UploadManypic( @RequestParam(value="file",required=false)MultipartFile[] file,
	        HttpServletRequest request,HttpServletResponse response, HttpSession session)
			throws IOException {
		JSONMap<String,Object> model = new JSONMap<String,Object>();
		try{
				File targetFile=null;
			    String msg="";//返回存储路径
			    int code=1;
			    ArrayList<Upload> list = new ArrayList<Upload>();
			    if (file!=null && file.length>0) {
			        for (int i = 0; i < file.length; i++) {
			            String fileName=file[i].getOriginalFilename();//获取文件名加后缀
			            if(fileName!=null&&fileName!=""){  
			            	//上下文项目名
			        		String projectName="";
			        		try{
			        			projectName = request.getServletContext().getContextPath().substring(1);
			        		}catch(Exception e){
			        			projectName="ROOT";
			        		}
			        		//上传文件夹名
			        		String floderName = "Upload/image";
			        		//首字母大写
			        		floderName = projectName + floderName.substring(0,1).toUpperCase() + floderName.substring(1) + "/";
			        		
			        		//文件保存目录路径
			        		String savePath = request.getServletContext().getRealPath("/").replace(projectName,"");
			        		savePath = savePath + floderName;
			        		//文件保存目录URL
			        		//String saveUrl  = request.getContextPath().replace(projectName,"");
			        		String saveUrl  = floderName;
		
			        		//检查/创建根目录
			        		File uploadDir = new File(savePath);
			        		if(!uploadDir.exists()){
			        			uploadDir.mkdirs();
			        		}
			        		
			        		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
			        		String ymd = sdf.format(new Date());
			        		savePath += ymd + "/";
			        		saveUrl += ymd + "/";
			        		
			                String returnUrl = saveUrl;//存储路径
			                String path =savePath; //文件存储位置
			                String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());//文件后缀
		                
			                String name=fileName;
			                fileName=System.currentTimeMillis()+fileF;//新的文件名
		

			                //先判断文件是否存在
			               // String fileAdd = ymd;
			                File file1 =new File(path); 
			                //如果文件夹不存在则创建    
			                if(!file1 .exists()  && !file1 .isDirectory()){       
			                    file1 .mkdir();  
			                }
			                targetFile = new File(file1, fileName);
			                    file[i].transferTo(targetFile);
			                    msg=returnUrl+fileName;

			                    Upload upload = new Upload();
			    				upload.setFilename(name);//真实文件名
			    				upload.setFilepath(msg);//文件路径
			    				list.add(upload);
			    				
			            }
			        }
			        model.put("list", list);
			    	}
			    model.put(SysConstant.OP_FLAG, true);
				model.put(SysConstant.OP_MESSAGE, SysConstant.SUCCESS);
				return model;
			} catch (Exception e) {
				e.printStackTrace();
				model.put(SysConstant.OP_FLAG, false);
				model.put(SysConstant.OP_MESSAGE, SysConstant.Exception);
				return model;
			}
	}
相关的实体类：
package com.repast.core.uiview;

public class Upload {

	/**
	 * 文件名
	 * */
	private String filename;
	/**
	 * 相对路径
	 * */
	private String filepath;
	/**
	 * 上传日期
	 * */
	private String uploaddate;
	/**
	 * 服务器端文件名字
	 * */
	private String servername;
	/**
	 * 真实路径
	 * */
	private String fileRealpath;
	
	/**
	 * 文件大小（KB）
	 */
	private String filesize;
	

	public String getFileRealpath() {
		return fileRealpath;
	}

	public void setFileRealpath(String fileRealpath) {
		this.fileRealpath = fileRealpath;
	}

	public String getFilename() {
		return filename;
	}

	public void setFilename(String filename) {
		this.filename = filename;
	}

	public String getFilepath() {
		return filepath;
	}

	public void setFilepath(String filepath) {
		this.filepath = filepath;
	}

	public String getUploaddate() {
		return uploaddate;
	}

	public void setUploaddate(String uploaddate) {
		this.uploaddate = uploaddate;
	}

	public String getServername() {
		return servername;
	}

	public void setServername(String servername) {
		this.servername = servername;
	}

	public String getFilesize() {
		return filesize;
	}

	public void setFilesize(String filesize) {
		this.filesize = filesize;
	}
	
	
}

完

本文地址：https://blog.csdn.net/weixin_44460462/article/details/109179290

相关标签： java upload js ajax jquery

上一篇： Uva1625 -Color Length（DP）

下一篇： Leetcode剑指offer（六）

推荐阅读