JFinal使用ajaxfileupload实现图片上传及预览

2023-08-13 03:00:04 78

本文实例为大家分享了JFinal使用ajaxfileupload实现图片上传预览的具体代码，供大家参考，具体内容如下

1.前端jsp页面核心代码



<%=request.getContextPath()%>/media/file/${banner.img}"style="width:300px;height:100px;"id="imgsrc"/>

functionajaxFileUpload(fileEid,paramdata){
if(typeof(paramdata)=='undefined')paramdata={};
var$file=$('#'+fileEid).val();
if($file==''){alert("请先选择对应的上传文件，谢谢");return;}

$.ajaxFileUpload({
url:'<%=request.getContextPath()%>/banner/uploadpic',
secureuri:false,
fileElementId:fileEid,
dataType:'text',
data:paramdata,
success:function(result){
varresult=result.substring(result.indexOf("{"),result.indexOf("}")+1);
result=eval("("+result+")");

if(result.t==1){
$("#imgsrc").attr("src","<%=request.getContextPath()%>/media/file/"+result.msg);
$("#imgurl").val(result.msg);
}else{
alert("上传失败");
}
}
});
}

2.后台核心代码

publicvoiduploadpic(){
UploadFileupfile=getFile();//JFinal规定getFile()必须最先执行
Filefile=upfile.getFile();
Stringfilename=file.getName();
Stringdelfilename=filename;
if(filename!=null&&!filename.equals("")){
filename=newSimpleDateFormat("yyyyMMddkkmmss").format(newDate())+filename;
/**
*新保存的位置
*/
Stringpath=getRequest().getSession().getServletContext()
.getRealPath("/");
StringnewPath="/media/file/";//自定义目录用于存放图片
/**
*没有则新建目录
*/
Filefloder=newFile(path+newPath);
if(!floder.exists()){
floder.mkdirs();
}
/**
*保存新文件
*/
FileInputStreamfis=null;
FileOutputStreamfos=null;
try{
FilesavePath=newFile(path+newPath+filename);
if(!savePath.isDirectory())savePath.createNewFile();
fis=newFileInputStream(file);
fos=newFileOutputStream(savePath);
byte[]bt=newbyte[300];
while(fis.read(bt,0,300)!=-1){
fos.write(bt,0,300);
}
}catch(Exceptione){
e.printStackTrace();
}finally{
try{
if(null!=fis)fis.close();
if(null!=fos)fos.close();
}catch(Exceptione){
e.printStackTrace();
}
}

/**
*删除原图片，JFinal默认上传文件路径为/upload（自动创建）
*/
FiledelFile=newFile(path+"/upload/"+delfilename);
if(delFile.exists()){
delFile.delete();
}
setAttr("msg",filename);
setAttr("t",1);
}else{
setAttr("t",0);
}
renderJson();
}

附：ajaxfileupload.js代码

jQuery.extend({
createUploadIframe:function(id,uri){
//createframe
varframeId='jUploadFrame'+id;
variframeHtml='');
if(data){
for(variindata){
jQuery('').appendTo(form);
}
}
varoldElement=jQuery('#'+fileElementId);
varnewElement=jQuery(oldElement).clone();
jQuery(oldElement).attr('id',fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);

//setattributes
jQuery(form).css('position','absolute');
jQuery(form).css('top','-1200px');
jQuery(form).css('left','-1200px');
jQuery(form).appendTo('body');
returnform;
},

ajaxFileUpload:function(s){
//TODOintroduceglobalsettings,allowingtheclienttomodifythemforallrequests,notonlytimeout
s=jQuery.extend({},jQuery.ajaxSettings,s);
varid=newDate().getTime()
varform=jQuery.createUploadForm(id,s.fileElementId,(typeof(s.data)=='undefined'?false:s.data));
vario=jQuery.createUploadIframe(id,s.secureuri);
varframeId='jUploadFrame'+id;
varformId='jUploadForm'+id;
//Watchforanewsetofrequests
if(s.global&&!jQuery.active++)
{
jQuery.event.trigger("ajaxStart");
}
varrequestDone=false;
//Createtherequestobject
varxml={}
if(s.global)
jQuery.event.trigger("ajaxSend",[xml,s]);
//Waitforaresponsetocomeback
varuploadCallback=function(isTimeout)
{
vario=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;
}elseif(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;
varstatus;
try{
status=isTimeout!="timeout"?"success":"error";
//Makesurethattherequestwassuccessfulornotmodified
if(status!="error"){
//processthedata(runsthexmlthroughhttpDataregardlessofcallback)
vardata=jQuery.uploadHttpData(xml,s.dataType);
//Ifalocalcallbackwasspecified,fireitandpassitthedata
if(s.success)
s.success(data,status);

//Firetheglobalcallback
if(s.global)
jQuery.event.trigger("ajaxSuccess",[xml,s]);
}else
jQuery.handleError(s,xml,status);
}catch(e){
status="error";
jQuery.handleError(s,xml,status,e);
}

//Therequestwascompleted
if(s.global)
jQuery.event.trigger("ajaxComplete",[xml,s]);

//HandletheglobalAJAXcounter
if(s.global&&!--jQuery.active)
jQuery.event.trigger("ajaxStop");

//Processresult
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
}
}
//Timeoutchecker
if(s.timeout>0)
{
setTimeout(function(){
//Checktoseeiftherequestisstillhappening
if(!requestDone)uploadCallback("timeout");
},s.timeout);
}
try
{

varform=jQuery('#'+formId);
jQuery(form).attr('action',s.url);
jQuery(form).attr('method','POST');
jQuery(form).attr('target',frameId);
if(form.encoding){
jQuery(form).attr('encoding','multipart/form-data');
}else{
jQuery(form).attr('enctype','multipart/form-data');
}
jQuery(form).submit();
}catch(e){
jQuery.handleError(s,xml,null,e);
}

jQuery('#'+frameId).load(uploadCallback);
return{abort:function(){}};
},

uploadHttpData:function(r,type){
vardata=!type;
data=type=="xml"||data?r.responseXML:r.responseText;
//Ifthetypeis"script",evalitinglobalcontext
if(type=="script")
jQuery.globalEval(data);
//GettheJavaScriptobject,ifJSONisused.
if(type=="json")
eval("data="+data);
//evaluatescriptswithinhtml
if(type=="html")
jQuery("").html(data).evalScripts();
returndata;
}
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

JFinal使用ajaxfileupload实现图片上传及预览

热门推荐

随机推荐