JSP+js+JAVA上传图片-fileupload

在add_tool,jsp文件中

主要代码:

1:<tr >
<td class='inLabel'>图片:</td>
<td >
<div>
<input id="fileName_tool" type="text" style="width:120px;float:left;" disabled="disabled" >
<input id="fileUpload_tool" type="button" style="width:50px;float:left;" value="浏览...">
<img id="fileUpload_wait_tool_add"  style="width:20px;float:left;" src='../../static/images/icons_menu/uploading.gif' >
</div>
<input id="input_add_tool_file" type="file" style="display:none;" name="files">
</td>
</tr>

2:<script type="text/javascript" src="../../static/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../static/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="../../static/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="../../static/js/jquery.fileupload-process.js"></script>
<script type="text/javascript" src="../../static/js/jquery.fileupload-validate.js"></script>
<script type="text/javascript">

上面五行是上传文件的依赖JS;

3:/**
 * 上传图片——————JS代码
  */
$(function(){
$("#fileUpload_wait_tool_add").hide();
$("#fileUpload_tool").click(function(){
$("#input_add_tool_file").click();
});
$('#input_add_tool_file').fileupload({
acceptFileTypes:/(\.|\/)('|png|jpeg|jpg')$/i,
maxNumberofFiles:1,
    url: '${pageContext.request.contextPath}/fileUpload/uploadtool',//controller层路径
  dataType: 'json',
      done: function (e, data) {
        $("#fileName_tool").val(data.result.path.substring(1));
        $("#fileUpload_wait_tool_add").hide();
          /*  console.log(data); */
        }
 }).on('fileuploadprocessalways',function (e,data){
if (data.files.error) {
if('File type not allowed' == data.files[0].error){
alert("上传的图片格式必须为jpg/jpeg/png");
}}else{
$("#fileUpload_wait_tool_add").show();
data.submit();
}
})
});

4:

@Controller
@RequestMapping("fileUpload")
public class UploadController {
@RequestMapping(value="uploadtool",method=RequestMethod.POST)
@ResponseBody
public Map<String, Object> uploadtool(MultipartHttpServletRequest request){
List<MultipartFile> files = request.getFiles("files");
这里 的“files”应该就是<input id="input_add_tool_file" type="file" style="display:none;" name="files">这里的name值
String[] path = FileUtils.flushFileStore(files.toArray(new MultipartFile[files.size()]), request.getSession().getServletContext().getRealPath("uploadFile/toolImage"), "");
Map<String, Object> map = new HashMap<String, Object>();
map.put("path", path[0]);
return map;
}
}

SpringMVC 文件上传MultipartHttpServletRequest

可以通过 MultipartHttpServletRequest对象来获取这些信息,例如:List<MultipartFile> files = request.getFiles("files");因为在DispatcherServlet中Spring已经将一个普通的 HttpServletRequest转换为了一个MultipartHttpServletRequest: 


5:FileUtils.flushFileStore的方法如下:

/**
 * 文件操作工具类
 * 实现文件的创建、删除、复制、压缩、解压以及目录的创建、删除、复制、压缩解压等功能
 * @author ThinkGem
 * @version 2013-06-21
 * 解压缩功能被注释掉了,需要的自己加入jar包
 * apache-ant-zip.jar
 * 
 */
public class FileUtils extends org.apache.commons.io.FileUtils {

private static Logger log = LoggerFactory.getLogger(FileUtils.class);
/** 
* @Title: flushFileStore
* @Description: 存储图片到磁盘
* @author shensuoyao
* @param mpFiles
* @param targetPath
* @return String[]
* @throws 
*/ 
public static String[] flushFileStore(MultipartFile[] mpFiles, String absPath, String imgpath) {
if(mpFiles == null) {
return new String[]{};
}
File foldler = new File(absPath + imgpath);
if(!foldler.exists()) {
foldler.mkdirs();
}
String[] filesPath = new String[mpFiles.length];
int idx = 0;
for(MultipartFile mf : mpFiles) {
if(!mf.isEmpty()) {
String f_name = mf.getOriginalFilename();
f_name = f_name.substring(0,f_name.lastIndexOf(".")) +"_"+System.currentTimeMillis() + f_name.substring(f_name.lastIndexOf("."));
try {
FileUtils.copyInputStreamToFile(mf.getInputStream(), new File(absPath + imgpath, f_name));
filesPath[idx++] = imgpath + File.separator + f_name;
} catch (IOException e) {
e.printStackTrace();
}
}
}
return filesPath;
}

}

上传成功的文件路径在Tomcat服务器中:E:\workspace1\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\PFSSmes\uploadFile\toolImage

E:\workspace1是我的eclipse工作环境





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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值