AI智能
改变未来

基于jQuery的ajax方式的图片上传

文件上传一般有两种方式:

  • 一是将文件直接以二进制的方式存储在数据库中,这种方式读取影响性能
  • 二是数据库直接存储文件的URL地址,读取文件的话直接根据数据库存储的URL地址进行读取。

所以,一般来说我们采用方式二!
html页面

$(\"#upload-btn\").click(function () {var formData = new FormData($(\"#addPhotoForm\")[0]);//对于文件类型的数据不能转化为json字符串,所以需要new FormData()$.ajax({url: \"${pageContext.request.contextPath}/student/upload_photo\",type: \"POST\",data: formData,/***必须false才会自动加上正确的Content-Type*/contentType: false,/*** 必须false才会避开jQuery对 formdata 的默认处理* XMLHttpRequest会对 formdata 进行正确的处理*/processData: false,success: function (data) {if (data.type == \"success\") {$.messager.alert(\"消息提醒\",data.msg,\"info\");$(\"#photo-preview\").attr(\"src\",data.src);//将文件的位置添加到图片预览处$(\"#add_photo\").val(data.src);//将文件上传的地址添加到隐藏的文本域中,用于之后将位置上传到数据库//关闭窗口$(\"#editDialog\").dialog(\"close\");}if (data.type == \"error\") {$.messager.alert(\"消息提醒\",data.msg,\"info\");}//$(\"#photo-preview\").hide();//隐藏照片}});});<form id=\"addPhotoForm\" method=\"post\" enctype=\"multipart/form-data\" action=\"/upload_photo\" target=\"photo_target\"><table id=\"addTable1\" cellpadding=\"8\"><tr ><td>预览头像:</td><td><img id=\"photo-preview\" src=\"\" alt=\"照片\" style=\"max-width: 100px; max-height: 100px;\" title=\"照片\"  /></td></tr><tr><td>学生头像:</td><td><input id=\"add-upload-photo\" class=\"easyui-filebox\" name=\"photo\" data-options=\"prompt:\'选择照片\'\" style=\"width:200px;\"><a id=\"upload-btn\" href=\"javascript:;\" class=\"easyui-linkbutton\" data-options=\"iconCls:\'icon-add\',plain:true\">上传图片</a></td></tr></table></form>
**Springmvc的Controller页**@RequestMapping(value=\"/upload_photo\",method= RequestMethod.POST)@ResponseBodypublic Map<String,String> uploadPhoto(MultipartFile photo,HttpServletRequest request){Map<String,String> map = new HashMap<>();if (photo == null){map.put(\"type\",\"error\");map.put(\"msg\",\"请选择一张图片\");return map;}//判断文件名大小是否过大if (photo.getSize() >= 10485760){map.put(\"type\",\"error\");map.put(\"msg\",\"文件大小超过10M\");return map;}//保存位置String path = request.getSession().getServletContext().getRealPath(\"/photo/\");//判断文件夹是否存在,无则建File file = new File(path);if (!file.exists()){file.mkdirs();}//给文件名起唯一值String filename = photo.getOriginalFilename();String uuid = UUID.randomUUID().toString().replace(\"-\",\"\");//保存文件filename = uuid+\"_\"+filename;try {photo.transferTo(new File(path,filename));//保存文件} catch (IOException e) {map.put(\"type\",\"error\");map.put(\"msg\",\"上传失败\");return map;}HttpSession session = request.getSession();map.put(\"src\",session.getServletContext().getContextPath()+\"/photo/\"+filename);//获取文件的路径map.put(\"type\",\"success\");map.put(\"msg\",\"上传成功\");return map;}
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 基于jQuery的ajax方式的图片上传