图片上传（方法一：jquery.upload.js）
浏览数：90 /
时间：2015年06月09日
一、在JSP页面引入jquery.upload.js 文件：
<script type="text/javascript" src="${ctx}/script/jquery.upload.js"></script>
二、JSP页面代码：
<!-- 弹窗 开始 --> <div class="dialog_teachermanage" id="addDialog" style="width:923px; display:none" > <div class="dialog_title" data-operateType="add"></div> <form id="formId" method="post" enctype="multipart/form-data"> <div class="dialog_body"> <div class="left"> <!-- 上传头像 ajax提交 class="hide" --> <div class="head_photo"> <input type="button" id="head_pic_btn" value="点击上传头像" /> <img src="${ctx}/static/images/common/head_default.jpg" data-img="head_default.jpg" width="180px" height="210px" id="head_img" /> </div> <!-- 上传头像 form提交 --> <!-- <div class="tphoto" name="head_img" id="head_img"> <input type="file" name="file" id="file" onchange="previewImage(this)" /> <div id="preview"> <img id="imghead" border="1" width="100px;" heigh="100px;" src=‘${ctx}/static/images/common/head_default.jpg‘> </div> </div> --> <div class="clear" style="height:30px;"></div> <!-- 隐藏的标签查询、输入框 --> <div class="addsign" id="addCourse"> <div class="tagdiv"> <a class="addtag"><i class=‘iconfont‘></i>添加标签</a> <div class="taginput clearfix"> <input class="form-control" id="tagName" type="text" /> <i class="iconfont ok" id="addtag-ok"></i> <i class="iconfont cancel" id="addtag-cancel"></i> </div> </div> </div> <ul class="singul labels" name="labels" id="labels"></ul> </div> <div class="right"> <input type="hidden" id="id"> <div class="right_tinput"> <span class="t_span">姓名</span> <input type="text" name="name" id="name" data-rule="required;length[1~30]" data-tip="30字以内"/> </div> <div class="right_tinput"> <span class="t_span">头衔</span> <input type="text" name="title" id="title" data-rule="length[0~30]" data-tip="30字以内"/> </div> <div class="right_tinput"> <span class="t_span">电话</span> <input type="text" name="phone" id="phone" data-rule="mobile" data-rule-mobile="[/^1[3458]\d{9}$/, ‘请检查手机号格式‘]" /> </div> <div class="right_tinput"> <span class="t_span">邮箱地址</span> <input type="text" name="email" id="email" data-rule="email;length[0~50];"/> </div> <div class="right_tinput"> <span class="t_span">讲师类型</span> <select id="trainerTypeId_add" name="trainerTypeId" placeholder="请选择"/></select> </div> <div class="right_tinput"> <span class="t_span">专业领域</span> <textarea cols="46" rows="5" placeholder="限200字" name="proField" id="proField" data-rule="length[0~200]"></textarea> </div> <div class="right_tinput"> <span class="t_span">简介</span> <textarea cols="46" rows="5" placeholder="限200字" name="intro" id="intro" data-rule="length[0~200]"></textarea> </div> </div> </div> <div class="dialog_bottom"> <div class="buttons"> <button type="button" id="cancel">取消</button> <button type="submit" >保存</button> </div> </div> </form> </div> <!-- 弹窗 结束 -->
三：JS代码：
<script type="text/javascript" > $(function(){ //点击上传头像 $("#head_pic_btn").click(function(){ $.upload({ url:‘${ctx}/td/trainer/uploadHeadImg.do‘, fileName:‘img‘, dataType:‘json‘, onComplate:function(data){ //删除data中<pre>标签 var start = data.indexOf(">"); if (start != -1) { var end = data.indexOf("<", start + 1); if (end != -1) { data = data.substring(start + 1, end); } } if(data!==‘‘){ //$("#head_pic_btn").hide(); //$("#head_img").show().attr(‘src‘,"${ctx}/upload/trainer_picture/"+data); $("#head_img").attr("src","${ctx}/upload/trainer_picture/"+data); $("#head_img").attr("data-img",data); /** data=JSON.parse( data.match(/{.+}/)[0] ) if( data.result===‘true‘ ){ $(‘#head_pic_btn‘).hide(); $(‘#head_img‘).show().attr(‘src‘,"${ctx}/upload/trainer_picture/"+data); }; alert(data.resultDesc); */ }; } }); }); });
四、JS提交代码（带预览效果）：
//新增修改 验证提交 $("#formId").validator({ theme :"simple_bottom", valid: function(form){ var tname=$(".dialog_title").text(); if(tname.indexOf("修改")>=0){ //修改保存 //SaveEditTeacher(); var labels = ""; var index = 0; $(".labels").find("li").each(function(){ if(index==0){ labels += "‘" + $(this).attr("data-id") + "‘"; }else{ labels += ",‘"+$(this).attr("data-id") + "‘"; } index++; }); var param={headImg:$("#head_img").attr("data-img"),name:$("#name").val(),title:$("#title").val(),phone:$("#phone").val(),email:$("#email").val(),proField:$("#proField").val(),trainerTypeId:$("#trainerTypeId").val(),address:$("#address").val(),intro:$("#intro").val(),labels:labels }; $.ajax({ url:"${ctx}/td/trainer/modify.do", type:"get", data:param, success:function(data){ if(data.result=="true"){ new AlertWin().initfn({ "tipscon":data.resultDesc, "showtime":2000 }); $("#formId")[0].reset(); addWin.close(); }else{ new AlertWin().initfn({ "tipscon":data.resultDesc, "showtime":2000 }); } //table.load(); table.load({"pageBean.pageNo": 1,name: $.trim($("#search_name").val()),trainerTypeId:$("#search_trainerTypeId").val() } ); } }); }else{ //新增 var labels = ""; var index = 0; $(".labels").find("li").each(function(){ if(index==0){ labels += "‘" + $(this).attr("data-id") + "‘"; }else{ labels += ",‘"+$(this).attr("data-id") + "‘"; } index++; }); var param={headImg:$("#head_img").attr("data-img"),name:$("#name").val(),title:$("#title").val(),phone:$("#phone").val(),email:$("#email").val(),proField:$("#proField").val(),trainerTypeId:$("#trainerTypeId").val(),address:$("#address").val(),intro:$("#intro").val(),labels:labels }; $.ajax({ url:"${ctx}/td/trainer/insert.do", type:"get", data:param, success:function(data){ if(data.result=="true"){ new AlertWin().initfn({ "tipscon":data.resultDesc, "showtime":2000 }); $("#formId")[0].reset(); addWin.close(); }else{ new AlertWin().initfn({ "tipscon":data.resultDesc, "showtime":2000 }); } //table.load(); table.load({"pageBean.pageNo": 1,name: $.trim($("#search_name").val()),trainerTypeId:$("#search_trainerTypeId").val() } ); } }); } } });
五、Java后台代码：
/** * * @Title: uploadHeadImg * @Description: 上传头像 * @param @param file * @param @param xCoordinate * @param @param yCoordinate * @param @param width * @param @param imgName * @param @param height * @param @param request * @param @param model * @param @return * @return String * @throws */ @RequestMapping(value = "/uploadHeadImg", produces = "text/plain;charset=UTF-8") @ResponseBody public String uploadHeadImg(@RequestParam(value = "img", required = false) MultipartFile file, @RequestParam(value = "xCoordinate", required = false) Integer xCoordinate, @RequestParam(value = "yCoordinate", required = false) Integer yCoordinate, @RequestParam(value = "width", required = false) Integer width, @RequestParam(value = "imgName", required = false) String imgName, @RequestParam(value = "height", required = false) Integer height, HttpServletRequest request, ModelMap model) { String result = ""; EmpMessageRes msg = new EmpMessageRes(); //获得工程下面upload资源包路径，当然这个包是已经存在的了 String path = request.getSession().getServletContext().getRealPath("upload/trainer_picture"); //上传的图片的名称 String fileName = file.getOriginalFilename(); String newfileName = UUIDUtil.generateGUID() + fileName.substring(fileName.lastIndexOf(".")).toLowerCase(); //下面是upload路径盘符的转化 StringBuffer importPath = new StringBuffer(); String temp[] = path.split("\\\\"); for (int i = 0; i < temp.length; i++) { importPath.append(temp[i]); importPath.append("/"); } importPath.append(newfileName); //看是否存在upload包，没有则会新建一个upload包，作为资源上传的路径 File targetFile = new File(path, newfileName); if (!targetFile.exists()) { targetFile.mkdirs(); } try { //文件上传 file.transferTo(targetFile); /** *利用工具类对图片进行裁剪 */ //String name = "D:\\image.jpg"; if (xCoordinate != null && yCoordinate != null && width != null && height != null) { OperateImage o = new OperateImage(xCoordinate, yCoordinate, width, height); o.setSrcpath(importPath.toString()); o.setSubpath(importPath.toString()); File toCompress = new File(importPath.toString()); o.cut(); if (toCompress.length() / 1024 > 50) //将上传的图片进行压缩 ImgUtil.createIcon(importPath.toString()); } msg.setResult("true"); msg.setResultDesc("头像上传成功"); msg.setImgUrl(newfileName); //result = "originalFilename=" + fileName + ";imgUrl=" + msg.getImgUrl() + ";result=" + msg.getResult() + ";resultDesc=" + msg.getResultDesc(); result = msg.getImgUrl(); } catch (Exception e) { msg.setResult("false"); msg.setResultDesc("头像上传失败"); e.printStackTrace(); } if (imgName != null) { File later = new File(path, imgName); if (later != null) later.delete(); } return result; }
效果如图：
jquery.upload.js:
var onChooseFile = ‘‘; (function($) { var noop = function(){ return true; }; var frameCount = 0; var imgName = ‘‘; $.uploadDefault = { url: ‘‘, fileName: ‘filedata‘, dataType: ‘json‘, params: {}, onSend: noop, exten: [], onComplate: noop }; $.upload = function(options) { var opts = $.extend(jQuery.uploadDefault, options); if (opts.url == ‘‘) { return; } var canSend = opts.onSend(); if (!canSend) { return; } var frameName = ‘upload_frame_‘ + (frameCount++); var iframe = $(‘<iframe style="position:absolute;height:0;width:0;" name="‘+frameName+‘" />‘); var form = $(‘<form method="post" style="display:none;" target="‘+frameName+‘" action="‘+opts.url+‘" name="form_‘+frameName+‘" enctype="multipart/form-data" />‘); // 选中文件, 提交表单(开始上传) upFile = function(fileInputDOM) { imgName = fileInputDOM.value; var extension = imgName.match(/\.[^\.]+$/)[0].toLowerCase(),ontest=false; if (options.exten !== undefined) { for(var i=0;i<options.exten.length;i++){ if( extension===options.exten[i] ){ ontest=true; }; }; if(!ontest){ new Tips({ "tipscon": "格式为" + options.exten.join("，") + "，请重新选择！" }); opts.ie8&&parElement.append(oldElement) return false; }; }; form.submit(); }; var oldElement,parElement,fileInput; if(opts.ie8){ oldElement = $(‘#‘ + opts.fileElementId),parElement=oldElement.parent(); $(oldElement).appendTo(form); }else{ // form中增加数据域 var formHtml = ‘<input type="file" name="‘ + opts.fileName + ‘" onchange="upFile(this)">‘; for (key in opts.params) { formHtml += ‘<input type="hidden" name="‘ + key + ‘" value="‘ + opts.params[key] + ‘">‘; } form.append(formHtml); } $(document.body).append(form).append(iframe); opts.ie8&&upFile(oldElement[0]); // iframe 在提交完成之后 iframe.load(function() { var data = $(this).contents().find(‘body‘).html(); opts.onComplate(data, imgName); if(!data) return false; setTimeout(function() { opts.ie8&&parElement.append(oldElement) iframe.remove(); form.remove(); },300); }); // 文件框 if(!opts.ie8){ fileInput = $(‘input[type=file][name=‘ + opts.fileName + ‘]‘, form); fileInput.click(); } }; })(jQuery);
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
