html代码:
------------------添加--------------------------
accept="image/gif,image/jpeg,image/jpg,image/png"
使用这个可以让用户只能看到并上传图片
原本是这个accept="image/*"的,后来发现在Chrome浏览器上响应过慢,所以加上mime类型,避免全部匹配引起时的浏览器响应过慢问题
<input type="file" id="file" style="display:none;" onchange="filechange(event)">//修改,这里如果不用onchange,会出现一个小bug,当你提交后,图片只能变一次 <img src="" width="200px" height="200px" id="img-change"> <button id="btn">保存图片</button>
js代码:
//实现点击图片同时,触发type=file这个input
$("#img-change").click(function () { $("#file").click(); })
当input发生改变时,如果有图片,则预览图片(这里只判断文件的改变,没判断图片)
/*$("#file").change(function (event) {*/
var filechange=function(event){ var files = event.target.files, file; if (files && files.length > 0) { // 获取目前上传的文件 file = files[0];// 文件大小校验的动作 if(file.size > 1024 * 1024 * 2) { alert('图片大小不能超过 2MB!'); return false; } // 获取 window 的 URL 工具 var URL = window.URL || window.webkitURL; // 通过 file 生成目标 url var imgURL = URL.createObjectURL(file); //用attr将img的src属性改成获得的url $("#img-change").attr("src",imgURL); // 使用下面这句可以在内存中释放对此 url 的伺服,跑了之后那个 URL 就无效了 // URL.revokeObjectURL(imgURL); } };
接下来实现当点击按钮时,通过jquey的一个插件ajaxupload来进行上传图片,
代码如下:
$("#btn").click(function () { $.ajaxFileUpload({ url: '/imgUpload', fileElementId:'file', dataType:'txt', secureuri : false, success: function (data){ if(data=="yes"){ $("#img-alert").css("display","block"); } }, error:function(data,status,e){ alert(e); } }); });
接下来是后台代码,我的后台是spring mvc框架,我没试过不用spring mvc的框架,但最多在拦截时不同,得到后,在文件处理那块是一样的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | @RequestMapping (value = "/imgUpload" ) @ResponseBody public synchronized String imgUpload( @RequestParam ( "file" ) MultipartFile file,HttpServletRequest request) throws IOException { String tishi= "no" ; System.out.println( "arrive here" ); if (!file.isEmpty()) { //System.out.println(file.getOriginalFilename()); String message = System.currentTimeMillis() + file.getOriginalFilename(); //现在的文件名是时间戳加原文件名,出现图片相同时,读取不出来的bug String realPath = request.getSession().getServletContext().getRealPath( "/upload/" ); //将文件保存在当前工程下的一个upload文件 FileUtils.copyInputStreamToFile(file.getInputStream(), new File(realPath, message)); //将文件的输入流输出到一个新的文件 message= "upload/" +message; HttpSession session=request.getSession(); Integer id=(Integer)session.getAttribute( "userid" ); //在session中获得用户id User user=userService.get(id); //在dao层保存数据,也就是图片的地址 user.setPhoto(message); userService.update(user); tishi= "yes" ; //返回yes,表示存储成功,可以使用try,catch来捕捉错误,这里偷懒不用 } return tishi; } |
还有一点,还需再spring mvc框架下配置文件
1 2 3 4 5 6 | <bean id= "multipartResolver" class = "org.springframework.web.multipart.commons.CommonsMultipartResolver" > <property name= "defaultEncoding" value= "utf-8" /> <property name= "maxUploadSize" value= "1048576000" /> <property name= "maxInMemorySize" value= "40960000" /> </bean> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· 为DeepSeek添加本地知识库
· 精选4款基于.NET开源、功能强大的通讯调试工具
· DeepSeek智能编程
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~