关于Java与前端jQuery的图片传输功能小结
来源：互联网 发布：苹果手机淘宝p图软件 编辑：程序博客网 时间：2024/06/11 05:56
在这几天的开发当中，遇到一个比较头疼的问题。在一个业务实现当中，需要对一条记录进行增删改功能，但是在这个功能里面，还有一个关于图片文件的增删改。
这里，我就用到了ajaxFileUpload这个比较牛逼的东东。话不多说，上代码！
当然，前提是引入一个js文件才行,这就是引入的技术文件// JavaScript DocumentjQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { //var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); if(jQuery.browser.version=="9.0" || jQuery.browser.version=="10.0"){ var io = document.createElement('iframe'); io.id = frameId; io.name = frameId; }else if(jQuery.browser.version=="6.0" || jQuery.browser.version=="7.0" || jQuery.browser.version=="8.0"){ var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); if(typeof uri== 'boolean'){ io.src = 'javascript:false'; } else if(typeof uri== 'string'){ io.src = uri; } } }else { var io = document.createElement('iframe'); io.id = frameId; io.name = frameId; } io.style.position = 'absolute'; io.style.top = '-1000px'; io.style.left = '-1000px'; document.body.appendChild(io); return io; }, createUploadForm: function(id, fileElementId, data) { //create form var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); var oldElement = jQuery('#' + fileElementId); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); //add data if(data) { for (var i in data) { $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); } } //set attributes jQuery(form).css('position', 'absolute'); jQuery(form).css('top', '-1200px'); jQuery(form).css('left', '-1200px'); jQuery(form).appendTo('body'); return form; }, testt: function(){ alert("testt"); }, ajaxFileUpload: function(s) { // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout s = jQuery.extend({}, jQuery.ajaxSettings, s); var id = s.id; //var id = s.fileElementId; var form = jQuery.createUploadForm(id, s.fileElementId,s.data);var io = jQuery.createUploadIframe(id, s.secureuri);var frameId = 'jUploadFrame' + id;var formId = 'jUploadForm' + id; if( s.global && ! jQuery.active++ ){// Watch for a new set of requestsjQuery.event.trigger( "ajaxStart" );} var requestDone = false; // Create the request object var xml = {}; if( s.global ){ jQuery.event.trigger("ajaxSend", [xml, s]); } var uploadCallback = function(isTimeout){ // Wait for a response to come back var io = document.getElementById(frameId);try{ if(io.contentWindow){xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document; }else if(io.contentDocument){ xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null; xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document; } }catch(e){jQuery.handleError(s, xml, null, e);} if( xml || isTimeout == "timeout"){ requestDone = true; var status; try { status = isTimeout != "timeout" ? "success" : "error"; // Make sure that the request was successful or notmodified if( status != "error" ){ // process the data (runs the xml through httpData regardless of callback) var data = jQuery.uploadHttpData( xml, s.dataType ); if( s.success ){ // ifa local callback was specified, fire it and pass it the data s.success( data, status ); }; if( s.global ){ // Fire the global callback jQuery.event.trigger( "ajaxSuccess", [xml, s] ); }; } else{ jQuery.handleError(s, xml, status); } } catch(e){ status = "error"; jQuery.handleError(s, xml, status, e); }; if( s.global ){ // The request was completed jQuery.event.trigger( "ajaxComplete", [xml, s] ); }; // Handle the global AJAX counter if(s.global && ! --jQuery.active){ jQuery.event.trigger("ajaxStop"); }; if(s.complete){ s.complete(xml, status); }; jQuery(io).unbind(); setTimeout(function(){ try{jQuery(io).remove();jQuery(form).remove(); }catch(e){ jQuery.handleError(s, xml, null, e); }}, 100); xml = null; }; } // Timeout checker if( s.timeout > 0 ){ setTimeout(function(){if(!requestDone ){uploadCallback( "timeout" );}}, s.timeout); } try{var form = jQuery('#' + formId);jQuery(form).attr('action', s.url);jQuery(form).attr('method', 'POST');jQuery(form).attr('target', frameId); if(form.encoding){ form.encoding = 'multipart/form-data'; }else{ form.enctype = 'multipart/form-data'; } jQuery(form).submit(); } catch(e){ jQuery.handleError(s, xml, null, e); } /*if(window.attachEvent){ document.getElementById(frameId).attachEvent('onload', uploadCallback); } else{ document.getElementById(frameId).addEventListener('load', uploadCallback, false); } */ jQuery('#' + frameId).load(uploadCallback); return {abort: function () {}}; }, uploadHttpData: function( r, type ) { var data = !type; data = type == "xml" || data ? r.responseXML : r.responseText; // ifthe type is "script", eval it in global context if( type == "script" ){ jQuery.globalEval( data ); } // Get the JavaScript object, ifJSON is used. if( type == "json" ){ data = r.responseText; var start = data.indexOf(">"); if(start != -1) { var end = data.indexOf("<", start + 1); if(end != -1) { data = data.substring(start + 1, end); } } eval( "data = " + data); } // evaluate scripts within html if( type == "html" ){ jQuery("<div>").html(data).evalScripts(); } return data; }, /*handleError: function( s, xml, status, e ) {// If a local callback was specified, fire itif ( s.error )s.error( xml, status, e );// Fire the global callbackif ( s.global )jQuery.event.trigger( "ajaxError", [xml, s, e] );}*/ handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); } // Fire the global callback if ( s.global ) { (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e] ); } }});function getFileSize(obj){ var objValue = obj.value; if (objValue=="") return ; var fileLenth=-1; try { //对于IE判断要上传的文件的大小 var fso = new ActiveXObject("Scripting.FileSystemObject"); fileLenth=parseInt(fso.getFile(objValue).size); } catch (e){ try{ //对于非IE获得要上传文件的大小 fileLenth=parseInt(obj.files[0].size); }catch (e) { fileLenth=-1; } } return fileLenth;} function _s() { var f = document.getElementById("f").files; //上次修改时间 alert(f[0].lastModifiedDate); //名称 alert(f[0].name); //大小 字节 alert((f[0].size)/1024); //类型 alert(f[0].type); }首先，这是新增图片时的功能：
function FileUpload(){//这是新增时需要的js$.ajaxFileUpload({url:"uploads",secureuri:false,fileElementId:'fileToUpload',dataType:"json",data:{ },success:function(data,status){alert("上传成功！");//$("#viewImg").attr("src",data.picUrl);},error:function(data,status,e) {alert("上传出错!");}});return false;};这是新增功能的html代码
<p>选择图片后,点击按钮上传</p> <input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"> <button class="button" onclick="FileUpload()">上传</button> <br> <img id="viewImg">修改使用到的html代码
<h1>选择图片后,点击按钮上传</h1><input id="fileToUploads" type="file" size="45" name="fileToUpload" class="input"><br><img id="viewImgs">
由于代码较多，我就不详细写出来，我把前台和后端的代码都列出来，大家看看
function loadorgmsg(){//对数据进行修改操作$("#alertfactory").on().click(function(){ var result =''; var fid = document.getElementById('form1'); var box = fid.getElementsByTagName('input'); var box_checked=new Array();//创建一个复选框被选中的数组 var message=""; for (var i = 0; i < box.length; i++){ //只允许选中单个复选框进行数据修改 if (box[i].type == 'checkbox' && box[i].checked && box[i].getAttribute("value")!=null){ var message=box[i].getAttribute("value");//把符合要求的元素放到数组的最后面box_checked.push(box[i]);}; }; //判断被选中复选框数组元素的个数。因为是修改数据，因此在业务场景中我们最好是对单个数据进行修改： if(box_checked.length>1){//如果大于1，则表示有两个被选中了，这时是不方便对数据做修改操作的，要提示给用户 alert("抱歉，只允许选中单个复选框"); return false; }; if(box_checked[0]==null){//如果数组为空，则表明没有选中复选框，应该提示用户去选中复选框 alert("请选中一条你需要修改的数据"); return false; }; alert("恭喜你，符合条件！"); alert(message); var Mesg=new Array();Mesg=message.split("[*]");var org_info_id=Mesg[0];//IDvar org_number=Mesg[1];//专业名称var org_name=Mesg[2];//专业分类信息备注var load_path=Mesg[3];//获取旧的文件路径var org_address=Mesg[4];var org_desc=Mesg[5];var contact_type_number=Mesg[6];var contact_name=Mesg[7];var contact_gender=Mesg[8];var OfficeTel=Mesg[9];var Phone=Mesg[10];var Email=Mesg[11];var gddhs=Mesg[12];var sjs=Mesg[13];var yxs=Mesg[14];//这一步是为了方便用户更加直观的修改数据$("#orgname").val(org_name); $("#orgnumber").val(org_number); $("#orgaddress").val(org_address); $("#contactname").val(contact_name); $("#orggender").val(contact_gender); $("#tel").val(OfficeTel); $("#phone").val(Phone); $("#email").val(Email); $("#desc").val(org_desc);//下一步是获取文本框内的数据.//这才是这整的修改数据，向服务器发送修改了的数据 $("#editfactory").click(function(){var fileToUploads=$("#fileToUploads").val().trim();//获取新上传文件//获取文件路径//fileToUpload的文件路径：c:\fakepath\123456789.jpg//alert(fileToUpload);var path1=fileToUploads.lastIndexOf("\\");//双斜杠转义字符//alert(path1);var path2=fileToUploads.substring(path1+1);//获取文件名,包含文件后缀名var reg1=fileToUploads.lastIndexOf(".");//双斜杠转义字符var reg2=fileToUploads.substring(reg1+1);//获取文件后缀//alert(path2);//alert(reg2);var fileType=new RegExp(/^(jpg|png|bmp)$/);//判断文件格式是否为png、jpg、bmp格式的alert(fileType.test(reg2));if(fileType.test(reg2)==false){alert("请选择png、jpg、bmp格式文件");return false;}//jQuery获取文件大小 var files=$("#fileToUploads")[0].files;//把jQuery对象变为DOM对象 filesize=files[0].size/1024; //alert(filesize); //判断文件大小 if(filesize>3*1024){ alert("文件大小超过3M,不符合要求！"); return false; }//获取文件路径var loadpaths="/uploads/"+path2;//获取新的文件路径 //alert(load_path); //alert(loadpaths); var orgname=$("#orgname").val().trim(); var orgnumber=$("#orgnumber").val().trim(); var orgaddress=$("#orgaddress").val().trim(); var contactname=$("#contactname").val().trim(); var gender=$("#orggender").val().trim(); var tel=$("#tel").val().trim(); var phones=$("#phone").val().trim(); var emails=$("#email").val().trim(); var desc=$("#desc").val().trim(); alert(gender); alert("phones:"+phones); //这一步，是比较有用的var params="oldpath="+load_path+"&org_info_id="+org_info_id+"&org_name="+orgname+"&load_path="+loadpaths+"&org_address="+orgaddress+"&org_desc="+desc+"&org_number="+orgnumber+"&contact_type_number="+contact_type_number+"&contact_name="+contactname+"&contact_gender="+gender+"&contact_type_name1="+gddhs+"&contact_info1="+tel+"&contact_type_name2="+sjs+"&contact_info2="+phones+"&contact_type_name3="+yxs+"&contact_info3="+emails; $.ajaxFileUpload({url:"/Terminal/org_msg/orgMsg_UpdateController.do?"+params,secureuri:false,fileElementId:"fileToUploads",type:"post",data:params,dataType:"JSON",success:function(result){alert("修改数据成功!");$("#editModal").modal("hide");orgmsg();//刷新$(".modal-backdrop").remove();},error:function(){alert("修改数据失败！");specialty();$(".modal-backdrop").remove();}});}); }); //新增信息$("#createfactory").on().click(function(){//alert(mdber);var gsqc=$("#gsqc").val().trim();//公司全称var yyzz=$("#yyzz").val().trim();//营业执照注册号var fileToUpload=$("#fileToUpload").val().trim();var gsdz=$("#gsdz").val().trim();var gslxr=$("#gslxr").val().trim();var xb=$("#xb").val().trim();var bgdh=$("#bgdh").val().trim();var sjhm=$("#sjhm").val().trim();var yx=$("#yx").val().trim();var bz=$("#bz").val().trim();//判断字段是否为空if(gsqc=="" || yyzz=="" || fileToUpload=="" || gsdz=="" || gslxr=="" || xb=="" || bgdh=="" || sjhm=="" || yx=="" || bz==""){alert("字段不能为空");return false;}//获取文件路径//fileToUpload的文件路径：c:\fakepath\123456789.jpg//alert(fileToUpload);var path1=fileToUpload.lastIndexOf("\\");//双斜杠转义字符//alert(path1);var path2=fileToUpload.substring(path1+1);//获取文件名,包含文件后缀名var reg1=fileToUpload.lastIndexOf(".");//双斜杠转义字符var reg2=fileToUpload.substring(reg1+1);//获取文件后缀var fileType=new RegExp(/^(jpg|png|bmp)$/);//判断文件格式是否为png、jpg、bmp格式的alert(fileType.test(reg2));if(fileType.test(reg2)==false){alert("请选择png、jpg、bmp格式文件");return false;} //jQuery获取文件大小 var files=$("#fileToUpload")[0].files;//把jQuery对象变为DOM对象 filesize=files[0].size/1024; alert(filesize); //判断文件大小 if(filesize>3*1024){ alert("文件大小超过3M,不符合要求！"); return false; }//获取文件路径var loadpath="/uploads/"+path2; $.ajax({url:"/Terminal/org_msg/OrgMsg_InsertController.do",type:"post",data:{"org_name":gsqc,//公司全称"load_path":loadpath,"org_address":gsdz,//公司地址"org_desc":bz,"org_number":yyzz,"contact_name":gslxr,//公司联系人"contact_gender":xb,"contact_type_name1":"固定电话",//具体联系方式1"contact_info1":bgdh,"contact_type_name2":"手机",//具体联系方式2"contact_info2":sjhm,"contact_type_name3":"电子邮箱",//具体联系方式3"contact_info3":yx},dataType:"json",success:function(result){var type=result.head.type;//alert(type);if(type==0){desc=result.head.desc;FileUpload();alert(desc);$("#delModal").modal("hide");orgmsg(); $(".modal-backdrop").remove(); }},error:function(){alert("新增数据失败！");}});});//删除$("#DelFactory").on().click(function(){var desc=""; var count =0; var result =''; var fid = document.getElementById('form1'); var box = fid.getElementsByTagName('input');$("#alarm").html("");//统计被选中的个数var count=0; for (var i = 0; i < box.length; i++){ if (box[i].type == 'checkbox' && box[i].checked && box[i].getAttribute("value")!=null){ count++; //当选中复选框并删除时，会根据不为空的复选框获取相应的id，去做删除操作！ //result = box[i].id +i+','+box[i].getAttribute("value"); var message=box[i].getAttribute("value"); alert(message);//alert(box[i].getAttribute("value")); /** * 如若需要删除组织机构信息，则需要获取一下信息： * org_info表的ID和load_path * contact_type表的contact_type_number * */ var Mesg=new Array(); Mesg=message.split("[*]"); var org_info_id=Mesg[0]; var load_path=Mesg[3]; var contact_type_number=Mesg[6]; $(function(){$.ajax({url:"/Terminal/org_msg/orgMsg_DeleteController.do",type:"post",data:{"org_info_id":org_info_id,"oldpath":load_path,"contact_type_number":contact_type_number},dataType:"json",success:function(results){var type=results.head.type;//alert(type);if(type==0){desc=results.head.desc;//alert(results.head.desc);$("#delModal").modal("hide");//alert(s);$("#alarm").html("删除成功"); orgmsg(); $(".modal-backdrop").remove();};},error:function(){alert(desc="删除数据失败！");}});}); } }; if(count==0){ $("#alarm").html("请选中复选框"); $("#ShutDown").click(function(){$("#alarm").html("确定删除选定的数据？");}); $("#sdown").click(function(){$("#alarm").html("确定删除选定的数据？");}); } }); };后台代码，我这里只贴出修改和删除的代码，因为修改和新增功能的代码是差不多的。而且，是引用博主孤傲苍狼大牛的文件实现上传功能
1 0
- 关于Java与前端jQuery的图片传输功能小结
- RESTEasy关于传输对象的小结
- Java 前端加密传输后端解密以及验证码功能
- Java 前端加密传输后端解密以及验证码功能
- [ 前端 ] JQuery 图片放大与获取鼠标!
- jQuery与Java实现图片的剪切
- jQuery与Java实现图片的剪切
- jQuery与Java实现图片的剪切
- jQuery与Java实现图片的剪切
- jQuery与Java实现图片的剪切
- jQuery与Java实现图片的剪切
- 关于图片查看的小结
- Jquery图片的缩放功能
- java实现图片传输与复制
- 【JAVA 小结】Java关于类与对象的代码
- 关于socket传输图片
- 关于java中类的组合与继承语法小结
- 关于java中类的组合与继承语法小结
- STL学习之路(一) deque
- CopyOnWriteArrayList
- java图像处理---特殊颜色二值化处理
- C#基础--之数据类型
- 遍历删除List中的元素
- 关于Java与前端jQuery的图片传输功能小结
- ExtJs6 store发送数据添加参数
- Java数据类型和运算符
- 【腾讯Bugly干货分享】iOS黑客技术大揭秘
- fatal:unable to access '...github.com/.../.git':Failed to connect to github.com port 443: Timed out
- 【POJ 3620】Avoid The Lakes
- 非常难得的一张类加载内存图(看图之后才会明白JAVA内存的结构)
- 华为OJ 初级：201301 JAVA题目0-1级
- 1044. 火星数字(20)
