HTML5的上传文件AJAX方式

最新推荐文章于 2023-07-04 17:14:17 发布

原创最新推荐文章于 2023-07-04 17:14:17 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #springmvc #图片上传 #ajax

开发常用问题专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的文件上传功能，允许用户同时选择多个文件进行上传，并通过AJAX实现异步请求。Java后台接收上传的文件，能够处理包括Word和Excel在内的多种文件类型，并将这些文件转换为图片格式。

<form  id="fileUpload" enctype="multipart/form-data" method="post" >
    <input id="txtUploadFile" name="upfile"  multiple="multiple" type="file" accept="image/*">
    <input id="buttonUploadFile" name="txtVideoUrl"  type="button" value="确认上传">
</form>
<!-- 引入jquery.js   或  zepto.js 都可以-->
<script type="text/javascript" src="/weixin-web/static/js/jq.js"></script>
<script type="text/javascript">
$(function(){
//点击   buttonUploadFile 按钮上传文件
$("#buttonUploadFile").click(function(){
fileUpload();
});
});
function fileUpload(){
                var files = $("#txtUploadFile")[0];
		var length = files["files"]["length"];
		if(length>6){
			alert("图片一次最多只能传6张");
			return false;
		}
 
var formData = new FormData($("#fileUpload")[0]);  
$.ajax({  
 // url: '/weixin-web/app/upload/singleFileUpload' ,  
  url: '/weixin-web/app/upload/multipleFileUpload' ,  
  type: 'POST',  
  data: formData, 
  dataType :'json',
  cache: false,  
  contentType: false,  
  processData: false,  
  success: function (returndata) {  
     console.log(returndata);
     $("#img").attr("src",returndata.url[0]);
     var html="";
     for(var v in returndata.url){
     html+='<img src="'+returndata.url[v]+'">'
     }
     $("#imgs").append(html);
  },
  error: function (returndata) {  
     console.log(returndata);
  }  
 });  
}</script> 

java后台 
@Controller
@RequestMapping(value = "app/upload")
public class FileUploadController {

/**
* 单文件上传
* 将word，excel文件上传后，在服务器转换成图片。并返回图片的路径
* @param upfile 上传的文件。
* @return 转换成图片的 路径集合
* @throws Exception
*/
@RequestMapping(value="singleFileUpload" ,method=RequestMethod.POST)
@ResponseBody
public Map<String, Object> singleFileUpload(MultipartFile upfile,HttpServletRequest request) throws Exception{
Map<String, Object>  result = new HashMap<String, Object>();
File file = new File(upfile.getOriginalFilename());
if(upfile.isEmpty()){  
result.put("msg", "failed");
result.put("url", "");
            return result;
        } 
upfile.transferTo(file);
//上传到文件服务器
String imagePath = EasyUploadFiles.getDiyUploadFilePath(file);
file.delete();
result.put("msg", "success");
result.put("url", imagePath);
return result;
}
/**
* 单文件上传
* 将word，excel文件上传后，在服务器转换成图片。并返回图片的路径
* @param uploadfile 上传的文件。
* @return 转换成图片的 路径集合
* @throws Exception
*/
@RequestMapping(value="multipleFileUpload" ,method=RequestMethod.POST)
@ResponseBody
public Map<String, Object> multipleFileUpload(@RequestParam("upfile")MultipartFile[] upfiles,HttpServletRequest request) throws Exception{
Map<String, Object>  result = new HashMap<String, Object>();
List<String> imageList = new ArrayList<String>();
for(int i=0;i<upfiles.length;i++){
MultipartFile uploadfile=upfiles[i];
File file = new File(uploadfile.getOriginalFilename());
if(uploadfile.isEmpty()){  
result.put("msg", "failed");
result.put("url",imageList);
           return result;
       } 
//上传到文件服务器
uploadfile.transferTo(file);
String imagePath = EasyUploadFiles.getDiyUploadFilePath(file);
file.delete();
imageList.add(imagePath);
}
result.put("msg", "success");
result.put("url", imageList);
return result;
}
}