web端上传图片的几种方式

首先是后台要有一个上传图片的工具类：

package utils;

import java.io.File;

import org.apache.commons.lang.StringUtils;

import play.Logger;
import play.Play;

import com.google.gson.Gson;
import com.ning.http.client.AsyncHttpClient;
import com.ning.http.client.Response;
import com.ning.http.multipart.FilePart;
import com.ning.http.multipart.StringPart;

public class PictureUploadUtils {

	public static String PICTURE_SERVER = Play.configuration.getProperty(
			"pic.host", "http://oss.iclass.cn/form");
	public static String PICTURE_SERVER_BASEURL = "http://oss.iclass.cn/smallfiles";

	private class Result {
		public boolean succ;
		public String html;
	}

	public class InfoResult {
		public int width;
		public int height;
	}

	public static String getUrlFromServer(File file) {
		final AsyncHttpClient client = new AsyncHttpClient();
		try {
			final Response response = client.preparePost(PICTURE_SERVER)
					.addBodyPart(new FilePart("qqfile", file))
					.addBodyPart(new StringPart("bucketName", "smallfiles"))
					.addBodyPart(new StringPart("source", "WEB")).execute()
					.get();
			final String responseBody = response.getResponseBody("utf8");
			if (responseBody == null) {
				Logger.error("[EndServer has not started.]");
			} else {
				Result result = new Gson().fromJson(responseBody, Result.class);
				return result.html;
			}
		} catch (Exception e) {
			Logger.error(e, e.getMessage());
		} finally {
			client.close();
		}
		return "";
	}

	public static InfoResult getInfoFromServer(String url) {
		final AsyncHttpClient client = new AsyncHttpClient();
		try {
			final Response response = client.prepareGet(url + "/info")
					.execute().get();
			final String responseBody = response.getResponseBody("utf8");
			if (responseBody == null) {
				Logger.error("[EndServer has not started.]");
			} else {
				return new Gson().fromJson(responseBody, InfoResult.class);
			}
		} catch (Exception e) {
			Logger.error(e, e.getMessage());
		} finally {
			client.close();
		}
		return null;
	}

	public enum Effect {
		PURE {// 原图
			@Override
			public String toString() {
				return "";
			}
		},
		FILL {// 填充
			@Override
			public String toString() {
				return "f";
			}
		},
		CUT {// 裁剪
			@Override
			public String toString() {
				return "c";
			}
		};
		@Override
		abstract public String toString();
	}

	public static boolean isFromPicServer(String picUrl) {
		return StringUtils.startsWithIgnoreCase(picUrl, PICTURE_SERVER_BASEURL);
	}

	/**
	 * @author xz8885 获取指定大小图片的方法，当宽或高为零时为零的维度会等比缩放，均为0则返回原始图片
	 *
	 * @param width
	 * @param height
	 * @param defaultUrl
	 * @return 图片url
	 */
	public static String getPictureFromPicServer(int width, int height,
			Effect effect, String defaultUrl) {
		if (!isFromPicServer(defaultUrl)) {
			return defaultUrl;
		}
		String fileName = StringUtils.substringAfterLast(defaultUrl, "/");
		effect = effect == null ? Effect.PURE : effect;
		return PICTURE_SERVER_BASEURL + "/" + width + "_" + height
				+ effect.toString() + "/" + fileName;
	}
}

一、使用ajax上传

js代码如下：

var upload = $("#uploadInput");
$("#uploadImg").click(function(){
<span style="white-space:pre">	</span>if($("#picNum").html()<5){
		upload.click();
	}else{
		alert( '已达到可上传图片数量上限');
		return;
	}
});
upload.change( function(){
	var formData = new FormData($("#uploadForm")[0]);
		 $.ajax({
		<span style="white-space:pre">	</span> url: '/assist/upload',
			 type: 'POST',
			 data: formData,
			 async: false,
			 cache: false,
			 contentType: false,
			 processData: false,
			 success: function (json) {
			<span style="white-space:pre">	</span>var url=json.data;
			<span style="white-space:pre">	</span>var str = '<li class="pic"><img src="'+url+'"><span class="pic-bg"></span><a href="javascript:;" class="picDelete pic-del">×</a></li>'
			<span style="white-space:pre">	</span>$("#uploadImg").parent().before(str);
			<span style="white-space:pre">	</span>$("#uploadInput").val("");
			<span style="white-space:pre">	</span>var num=Number($("#picNum").html())+1;
			<span style="white-space:pre">	</span>$("#picNum").html(num);
		<span style="white-space:pre">	</span> },
			 error: function (json) {
				 alert(json);
							    }
			  });
		});

对应的controller中方法：

public static void upload(File file, String fileType) {
		String url = "";
		String pathname = file.getAbsolutePath().replaceAll(" ", "_");
		File newFile = new File(pathname);
		file.renameTo(newFile);
		url = PictureUploadUtils.getUrlFromServer(newFile);
		
	}

二、使用upload.js上传

upload.js 代码：

/**
 * jQuery upload v1.2
 * http://www.ponxu.com
 *
 * @author xwz
 */
(function($) {
	var noop = function(){ return true; };
	var frameCount = 0;
	
	var uploadDefault = {
		url: '',
		fileName: 'filedata',
		dataType: 'json',
		params: {},
		onSend: noop,
		onComplate: noop
	};

	$.upload = function(options) {
		var opts = $.extend(uploadDefault, options);
		if (opts.url == '') {
			return;
		}
		
		var canSend = opts.onSend();
		if (!canSend) {
			return;
		}
		var vcount=++frameCount;
		var frameName = 'upload_frame_' + vcount;
		var iframe = $('<iframe style="position:absolute;top:-9999px" />').attr('name', frameName);
		var form = $('<form id="formUpload_'+vcount+'" method="post" class="abs_out" enctype="multipart/form-data" />').attr('name', 'form_' + frameName).attr("target", frameName).attr('action', opts.url);
		// form中增加数据域
		var formHtml = '<input type="file" id="formUpload_file_'+vcount+'" name="' + opts.fileName + '" onchange="onChooseFile(this)">';
		form.append(formHtml);
		iframe.appendTo("body");
		form.appendTo("body");
		// iframe 在提交完成之后
		iframe.load(function() {
			var contents = $(this).contents().get(0);
			var data = $(contents).find('body').text();
			if ('json' == opts.dataType) {
				var	data1 = eval('(' + data + ')');
			}
			
			opts.onComplate(data1);
			setTimeout(function() {
				iframe.remove();
				form.remove();
			}, 5000);
		});
		
		// 文件框
//		alert($("#formUpload").attr("action"));
		$("#formUpload_"+vcount).children("input").click();
	};
})(jQuery);

// 选中文件, 提交表单(开始上传)
var onChooseFile = function(fileInputDOM) {
	var form = $(fileInputDOM).parent();
	form.submit();
	
};

对应的js代码：

//附件上传
		var upload=function(options){
			Do('upload',function(options){
				$.upload({
					// 上传地址
					url: '/upload', 
					// 文件域名字
					fileName: 'filedata', 
					// 其他表单数据
					params: {name: 'pxblog'},
					// 上传完成后, 返回json, text
					dataType: 'json',
					// 上传之前回调,return true表示可继续上传
					onSend: function() {	
						return true;
					},
					// 上传之后回调
					onComplate: function(json) {
						var path= json.data;
						alert(path);
					}
				});
			});
	    }
		var uploadPic=function(){
			$("#uploadPicBtn").click(function(){
				var ele=$(this);
				upload(ele);
			})
		}
		uploadPic();

对应的controller方法：

public static void upload() throws Exception {
		DataParser parser = DataParser.parsers.get(request.contentType);
		parser.parse(request.body);
		ArrayList<FileUpload> uploads = (ArrayList<FileUpload>) request.args
				.get("__UPLOADS");
		String fileName = "";
		for (FileUpload upload : uploads) {
			if (upload.getFileName().endsWith(".mp4")) {
				fileName = AudioUploadUtils.getUrlFromServer(upload.asFile());
			} else {
				fileName = PictureUploadUtils.getUrlFromServer(upload.asFile());
			}
			// break;
		}
		
	}