图片上传（简单例子）

大概逻辑是，1、图片单独form、选择上传图片（异步上传，jquery.form.js）

2、后台判断上传图片大小（太大不上传返回提示、或大小可以上传返回上传路径）

3、根据返回路径，判断图片宽高。不符合提示并删除图片、符合提示上传成功

4、上传图片后单击提交数据的form按钮，提交表单（其中有图片路径，存到数据库表中）

html

             <form id="multForm" method="post" enctype="multipart/form-data"><span class="L fs_16 gray">应用logo: </span><div class="L app_logo" id="preview"><img id="imghead" src="<%=request.getContextPath()%>/images/app_1.png" width="100%";height="100%"></div><!-- <input type="file" name="file" id="file" class="L pop_inpt"> --><div class="L" style="border:1px solid #c5c5c5;margin-left:10px"><input type="text" name="appLogo" id="appLogo" class="app_logo_name L" readonly="true" style="border-right:none"/><input type="button" value="浏 览" class="app_ll L"/></div><input type="file" name="file" id="file" class="app_file" "/><!-- οnchange="previewImage(this) --></form><form id="editAppForm" οnsubmit="return check()"><input id="id" value="${appId}" type="hidden"/> <input type="text" name="logoPath" id="logoPath" type="hidden" style="display:none"/><p class="app_logo_tip" style=" margin-top: -20px;"><span>仅支持JPG、JPEG、PNG、BMP格式,40*40,文件小于1M</span></p>  <div class="clearfix" style="margin-bottom:24px"><span class="L fs_16 gray">应用名称 </span><input name="name" type="text" class="L pop_inpt required"/></div><div class="clearfix" style="margin-bottom:44px"><span class="L fs_16 gray">应用描述 </span><textarea name="note" class="L pop_txt required"></textarea></div><div class="pop_btn_wrapper"><input type="button" value="确定"/><input type="button" value="取消"/></div></form>

$(function(){tp.oldPath="";$("#file").change(function (data) {var filepath = $("input[name='file']").val();var extStart = filepath.lastIndexOf(".");var ext = filepath.substring(extStart, filepath.length).toUpperCase();if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {alert("图片限于bmp,png,gif,jpeg,jpg格式");return false;} else { //$("#fileType").text(ext) if(tp.oldPath!=""){tp.deleteFile(path);//删除没用的图片}tp.uploadPoto();//上传图片}return true;});
})
var tp={};
tp.uploadPoto=function (){$('#multForm').ajaxSubmit({success: function (result) {if(result.success){var path = result.data;var img=new Image();img.src=path;img.onload = function(){if(img.width>40||img.heigth>40){   alert("图片不大于40*40"); tp.deleteFile(path);}else{alert("上传成功");tp.oldPath=path;$("#imghead").attr("src",path);$("#logoPath").val(path);$("#appLogo").val(path.split("\\")[path.split("\\").length-1]);}}}else{alert(result.err);} },err:function(){alert("请求失败");},url: ctx + "application/uploadAppLogo",data: $('#multForm').formSerialize(),type: 'POST',dataType: 'json',beforeSubmit: function () {console.log("正在上传图片请稍后");}});
}
//删除图片
tp.deleteFile=function (path){$.ajax({type : "post",url : ctx+"application/deleteAppLog",data:{"filePath":path},dataType:"json",success:function(result){if(result.status=="200"){console.log("删除图片成功");}else{console.log("删除上传文件失败");}},err:function(){console.log("删除上传文件请求失败");}})
}

java

 @RequestMapping("/uploadAppLogo")@ResponseBodypublic JsonR uploadAppLogo(@RequestParam("file") CommonsMultipartFile file,HttpServletRequest request){//上传文件if(file.getSize()<1*1024*1024){JsonResponse jr = loadFile(file,request,filePath);if(jr.isSuccess()){String path = (String) jr.getData();return JsonR.ok(path);}return JsonR.notOk("上传失败");}else{return JsonR.notOk("上传文件必须小于1M");}}@RequestMapping("/deleteAppLog")@ResponseBodypublic JsonR deleteAppLog(HttpServletRequest request,@RequestParam String filePath){String realPath = request.getSession().getServletContext().getRealPath("");File file = new File(realPath+File.separator+"WEB-INF"+File.separator+filePath);Boolean flag = file.delete();return JsonR.ok(flag);}

 private JsonR loadFile(CommonsMultipartFile file,HttpServletRequest request,String path){if (!file.isEmpty()) {  try {  if(file.getSize()>1*1024*1024){return JsonResponse.notOk("请选择小于1M的文件");}// 拿到输出流，同时重命名上传的文件  //File.separator+"WEB-INF"+File.separator+String realPath = request.getSession().getServletContext().getRealPath("");String filename =  new Date().getTime()+ file.getOriginalFilename();FileOutputStream os = new FileOutputStream(realPath+File.separator+"WEB-INF"+File.separator+filePath+File.separator+filename);  // 拿到上传文件的输入流  InputStream in = file.getInputStream();  // 以写字节的方式写文件  int b = 0;  while((b=in.read()) != -1){  os.write(b);  }  os.flush();  os.close();  in.close();  //返回文件路径，用于数据库存储return JsonR.ok(filePath+File.separator+filename);} catch (Exception e) {       return JsonR.notOk("文件上传失败");}  }return JsonR.notOk("文件上传失败");}

图片上传（简单例子）相关推荐

七牛云 vue 图片上传简单解说，js 上传文件图片
七牛云 vue 图片上传简单解说,js 上传文件图片一.七牛云简介首次使用七牛云存储进行项目的图片存储,整了一上午才整明白,这些官方的教程把明白人也给说糊涂了,文档很不规范. 七牛云有免费的使用额 ...
图片上传(加水印、缩略图、远程保存）的简单例子
图片上传(加水印.缩略图.远程保存)的简单例子(应用于51aspx.com) 该源码下载地址:http://51aspx.com/CV/ImageUpload 今天看到xiongeee发的文章使用使用 ...
php上传图片中文,php图片上传方法
php图片上传方法发布于 2015-11-07 21:44:59 | 92 次阅读 | 评论: 0 | 来源: PHPERZ PHP开源脚本语言PHP(外文名: Hypertext Preproce ...
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue点击图片后复制图片url_简单漂亮的（图床工具）开源图片上传工具——PicGo...
介绍 PicGo: 一个用于快速上传图片并获取图片URL链接的工具,由vue-cli-electron-builder构建的简单漂亮的图片上传工具!基于electron-vue开发,支持macOS,W ...
php发表图片文章代码,最新PHP图片上传的一个例子的文章【延伸阅读】
ThinkPHP+Uploadify图片上传示例 => Yii框架+CKEditor实现图片上传示例 => CodeIgniter使用类库做图片上传示例 => php+js实现异步图 ...
ASP.NET Core 简单实现七牛图片上传（FormData 和 Base64）
ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...
python自动上传图片_使用Python实现一个简单的图片上传存储服务
使用flask实现的一个简单的图片上传服务设计初衷对于图片的存储,有很多选择,一般采用云服务如(七牛,又拍等),但是国内的服务像七牛自定义域名竟然需要域名备案(Excuse me,当初就是因为备 ...
Android简单实现将手机图片上传到服务器中
在本例中,将会简单的实现安卓手机将图片上传到服务器中,本例使用到了服务器端:PHP+APACHE 客户端:JAVA 先简单实现一下服务器端的上传并测试上传效果,看实例 <?php if(emp ...
一般网站上传图片的大小是多少？网站图片上传格式大小建议附带简单修图方法
一般网站上传图片的大小是多少呢?尚网汇智给您列一下网站图片上传格式大小建议: 首先,上传图片格式: 通常图片以JPG图片居多,JPG格式的图片较小,图片也比较柔和不过特殊情况就要用特殊格式的图片了 ...

图片上传（简单例子）

图片上传（简单例子）相关推荐

最新文章

热门文章