HTML5的上传文件AJAX方式
来源:互联网 发布:项目进度跟进软件 编辑:程序博客网 时间:2024/06/17 19:41
<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)@ResponseBodypublic 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)@ResponseBodypublic 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;}}
阅读全文
0 0
- HTML5的上传文件AJAX方式
- html5 ajax文件上传
- html5 ajax文件上传
- html5 ajax文件上传
- html5 ajax文件上传的进度条实现
- html5用ajax方式实现文件上传并显示进度
- HTML5 文件上传的2种方式
- Ajax方式上传文件
- Ajax方式上传文件
- Ajax方式上传文件
- Ajax方式上传文件
- Ajax方式上传文件
- ajax方式上传文件
- Ajax方式上传文件
- 通过Ajax的方式上传文件
- Ajax方式实现文件上传
- 通过Ajax方式上传文件
- Html5的文件上传
- xss攻击方式
- 2017-6-20--github初览
- 总想先人一步却停滞不前也是一种病?
- 键盘事件、表单事件
- 阻塞队列之ArrayBlockingQueue
- HTML5的上传文件AJAX方式
- win10怎么配置JDK8的环境变量
- 想学数据分析(人工智能)需要学哪些课程?
- MyBatis关联映射:一对一、一对多
- 【待写】UIPageViewController 如何添加自定义UIViewController
- leetcode No44. Wildcard Matching
- java_高级类修饰符(基本)
- 运算符
- Annotation注解APT(二):自定义注解