百度上传控件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);
		}
	});

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





  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值