百度上传控件webUPload 的使用-优快云博客

要使用上传控件首先需要引用webuploader的js文件以及css文件，还有对应的image文件

具体可以根据使用选择http://fex.baidu.com/webuploader/download.html这个网址上面下载文件，地址如果失效可以自己百度一下 webuploader 下载即可

引用完对应的文件后就可以编写页面了

首先引用js以及css文件

<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/webuploader.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/diyUpload.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/webuploader.html5only.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/diyUpload.js"></script>

以及自己需要写控制图片显示的位置的css

/* css样式，用来控制有图片之后的显示方式，可以不添加 */
 *{ margin:0; padding:0;}
#box{ margin:50px auto; width:540px; min-height:400px; background:#FF9}
#demo{ margin:50px auto; width:540px; min-height:800px; background:#CF9}

在页面中只需要写上

<body>
	<div id="box">
		<div id="test"></div>
	</div>

	<div id="demo">
		<div id="as"></div>
	</div>
</body>

js中完成webuploader的加载方法和上传方法

<script type="text/javascript">
	/*
	 * 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯;
	 * 其他参数同WebUploader
	 */
	$('#test').diyUpload({
		url : 'upLoadFile',
		success : function(data) {
			console.info(data);
		},
		error : function(err) {
			console.info(err);
		}
	});

	$('#as').diyUpload({
		url : 'upLoadFile',
		success : function(data) {
			console.info(data);
		},
		error : function(err) {
			console.info(err);
		},
		buttonText : '选择文件',
		chunked : true,
		// 分片大小
		chunkSize : 10 * 1024 * 1024,
		//最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
		fileNumLimit : 50,
		fileSizeLimit : 100 * 1024 * 1024,
		fileSingleSizeLimit : 10 * 1024 * 1024,
		accept : {}
	});
</script>

这样页面就方面就完成了，只需要在后台写一个对应的接收传递过来图片的方法就行了我这里叫做upLoadFile方法

下面是我upLoadFile方法的源码

	@RequestMapping("upLoadFile")
	public void uploadFile(HttpServletRequest request,
			HttpServletResponse response, String name, String filename,
			MultipartFile file) {
		//转换MultipartFile类型为file类型
		CommonsMultipartFile cf = (CommonsMultipartFile) file;
		DiskFileItem fi = (DiskFileItem) cf.getFileItem();
		File files = fi.getStoreLocation();
		//得到保存的相对路径
		String savePath = request.getServletContext().getRealPath("/upload");
		//创建文件路径
		File dir = new File(savePath);
		//生成输入输出流
		InputStream in = null;
		OutputStream out = null;
		try {
			//把文件导入输入流
			in = new FileInputStream(files);
			//生成保存的文件
			File saveFile = new File(dir, name);
			//生成输出流
			out = new FileOutputStream(saveFile);
			//把输入流copy到输出流
			IOUtils.copy(in, out);
		} catch (Exception e) {

		} finally {
			//关闭输入输出流
			IOUtils.closeQuietly(in);
			IOUtils.closeQuietly(out);
		}
		//设置返回的json字符串
		response.setContentType("text/xml;charset=utf-8");
		PrintWriter outPrint;
		try {
			outPrint = response.getWriter();
			outPrint.print("成功");
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

这样一个简单的文件上传就完成了

还有一点，如果上传图片或者文件的时候需要附带参数的话只需要加上formData:{"studentId":"123"}属性到

		$('#test').diyUpload({
		url : 'upLoadFile',

		formData:{"studentId":"123"},
		success : function(data) {
			console.info(data);
		},
		error : function(err) {
			console.info(err);
		}
	});

后台只需要吧接收对应的属性值即可

百度上传控件webUPload 的使用

相关推荐