在这几天的开发当中，遇到一个比较头疼的问题。在一个业务实现当中，需要对一条记录进行增删改功能，但是在这个功能里面，还有一个关于图片文件的增删改。
这里，我就用到了ajaxFileUpload这个比较牛逼的东东。话不多说，上代码！
当然，前提是引入一个js文件才行,这就是引入的技术文件
// JavaScript Document
jQuery.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 requests
jQuery.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 it
if ( s.error )
s.error( xml, status, e );
// Fire the global callback
if ( 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" οnclick="FileUpload()">上传</button>
<br>
<img id="viewImg"> <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]; //ID
var 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("确定删除选定的数据？");});
}
});
};后台代码，我这里只贴出修改和删除的代码，因为修改和新增功能的代码是差不多的。而且，是引用博主孤傲苍狼大牛的文件实现上传功能
931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
