uploadify文件上传

需要的文件  jquery.uploadify-3.1.min.js   、uploadify.css

单文件上传

1、HTML和JS部分

<input type="file" name="file_upload" id="file_upload"/>


function uploadPicT() {
	$("#file_upload").uploadify({
		'height' : 27, // 按钮的高度
		'buttonText' : '上传图片', // 按钮的名称
		'swf' : globlePath + '/includes/uploadify/uploadify.swf', // 动画的地址
		'uploader' : globlePath + '/web/upTree/uploadPic.do',// 上传的地址
		'auto' : true, // 是否为选中自动上传
		'multi' : false,// 是否允许多文件上传
		'method' : 'post',
		// 'removeCompleted' : false,//是否可以取消 默认是true
		'cancelImg' : globlePath + '/includes/uploadify/uploadify-cancel.png',
		'fileTypeExts' : '*.jpg;*.jpge;*.gif;*.png', // 允许的格式
		'fileSizeLimit' : '2MB',// 允许的大小
		'fileObjName' : 'meinv',// 上传的名字
		'formData' : {
			'brandType' : '111',
			'brandId' : '222'
		},// 上传的参数
		'onUploadSuccess' : function(file, data, response) {
			alert("上传成功");
			var obj = eval('(' + data + ')');
			$('#logoPath').val(obj.realPath);
		},
		'onSelectError' : function(file, data, response) {
			alert("上传出错");
		}
		/*	//加上此句会重写onSelectError方法【需要重写的事件】
		'overrideEvents' : [ 'onSelectError', 'onDialogClose' ],
		//返回一个错误,选择文件的时候触发
		'onSelectError' : function(file, errorCode, errorMsg) {
			switch (errorCode) {
			case -110:
				alert("文件 ["
						+ file.name
						+ "] 大小超出系统限制的"
						+ jQuery('#dialogPic').uploadify(
								'settings', 'fileSizeLimit')
						+ "大小!");
				break;
			case -120:
				alert("文件 [" + file.name + "] 大小异常!");
				break;
			case -130:
				alert("文件 [" + file.name + "] 类型不正确!");
				break;
			}
		}*/
	});
}

2、后台java部分

@RequestMapping(value = "/uploadPic", method = { RequestMethod.POST })
	public void uploadPic(
			@RequestParam("meinv") MultipartFile meinv,
			@RequestParam(value = "brandId") String bannerid,
			HttpServletRequest request, HttpServletResponse response) {
		DateFormat df = new SimpleDateFormat("yyyyMMddhhmmss");
		Date date = new Date();
		try {
			String fileName = meinv.getOriginalFilename(); // 上传的文件名称
			String postfix = fileName.substring(fileName.lastIndexOf("."),
					fileName.length());// 文件后缀
			String sufffix = df.format(date) + postfix;// 保存的文件名称 加扩展名
			String realPath = BizTypeUtils.UPLOAD_DIRECTORY + File.separator
					+ String.valueOf(Calendar.getInstance().get(Calendar.YEAR));
			File savefile = new File(new File(realPath), sufffix);
			if (!savefile.getParentFile().exists()) {
				savefile.getParentFile().mkdirs();
			}
			FileCopyUtils.copy(meinv.getBytes(), savefile);
			WebUtil.writeToWeb(response, WebUtil.SUCCESS);
		} catch (Exception e) {
			WebUtil.writeToWeb(response, WebUtil.FAILURE);
		}

	}

2、多文件上传

1、HTML和JS部分

<div id="dialogDP" style="padding: 5px 5px; display: none;">
		<div id="fileQueue"></div>
		<input type="file" name="uploadify" id="uploadify"/>
		<a href="javascript:void(0)"class="easyui-linkbutton" iconCls="icon-search"	οnclick="$('#uploadify').uploadify('upload')">上传</a> 
		<a href="javascript:void(0)"class="easyui-linkbutton" iconCls="icon-search"	οnclick="$('#uploadify').uploadify('cancel')">取消</a> 
		<a href="javascript:void(0)"class="easyui-linkbutton" iconCls="icon-search"	οnclick="$('#uploadify').uploadify('upload','*')">上传所有</a> 
		<a href="javascript:void(0)"class="easyui-linkbutton" iconCls="icon-search"	οnclick="$('#uploadify').uploadify('cancel','*')">取消所有</a> 
</div>

2、java部分

@RequestMapping(value = "/uploadDouPic", method = { RequestMethod.POST })
	public void uploadDouPic(@RequestParam(value = "brandId") String brandId,
			HttpServletRequest request, HttpServletResponse response) {
		DateFormat df = new SimpleDateFormat("yyyyMMddhhmmss");
		Date date = new Date();
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
		String ctxPath = BizTypeUtils.UPLOAD_DIRECTORY + File.separator
				+ String.valueOf(Calendar.getInstance().get(Calendar.YEAR));
		System.out.println("ctxpath=" + ctxPath); // 创建文件夹
		File file = new File(ctxPath);
		if (!file.exists()) {
			file.mkdirs();
		}
		String fileName = null;
		for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) { // 上传文件
			MultipartFile mf = entity.getValue();
			fileName = mf.getOriginalFilename();// 获取原文件名
			// System.out.println("filename="+fileName);
			String postfix = fileName.substring(fileName.lastIndexOf("."),
					fileName.length());// 文件后缀
			String sufffix = df.format(date) + postfix;// 保存的文件名称 加扩展名
			File uploadFile = new File(ctxPath + sufffix);
			try {
				FileCopyUtils.copy(mf.getBytes(), uploadFile);
				WebUtil.writeToWeb(response, WebUtil.SUCCESS);
			} catch (IOException e) {
				// responseStr = "上传失败";
				e.printStackTrace();
				WebUtil.writeToWeb(response, WebUtil.FAILURE);
			}
		}
	}

在springMvc中加载上配置

 <!-- 上传拦截,如最大上传值及最小上传值 -->  
    <bean id="multipartResolver"  
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
        <!-- one of the properties available; the maximum file size in bytes -->  
        <property name="maxUploadSize" value="5000000000" />
        <property name="maxInMemorySize" value="4096" />
         
    </bean>   


文件上传的另一个组件,可以参考

ajaxfileupload.js

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值