您的位置:首页 > Web前端 > JQuery

对于异步上传图片的感悟

2014-07-31 13:02 253 查看
<span style="font-size:18px;">1.头像异步上传:本质是把upload的值传给后台。
(1)新增模块:
<label class="required" for="upload">图片:</label>
<input type="file" name="<span style="color:#ff0000;">upload</span>" id="upload" style="width: 120px;"/>   <span style="color:#33cc00;">//与id无关</span>
<input type="hidden" name="imgpath" id="imgpath" value=""/>   <span style="color:#33cc00;">//存放img的值</span>
<img src="<%=request.getContextPath()%>/administrator/image/img/nopicture.jpg" 	id="showimg" width="60px" height="50px"/>     <span style="color:#33cc00;"> //显示图片</span>
---------------------------------------------------------------------------------------------------------
$("#addKtype input[type='file']").live('change',function(){
$.ajaxFileUpload(
{
url:currentPath+"/knowledge/ajaxFileUpload.action",
secureuri:false,
fileElementId:'<span style="color:#ff0000;">upload</span>',
dataType: 'json',
success: function (data, status)
{
$("#imgpath").val(data);
$("#showimg").attr("src",currentPath+"/upload_imgs/knowledge/"+data);
},
error: function (data, status, e)
{
alert(e);
}
});
});

(2)修改模块:
<label class="required" for="upload">图片:</label><br/>
<input type="file" id="upload1" class="full" value="" name="<span style="color:#ff0000;">upload</span>" style="width: 45%;"/>
<input type="hidden" name="imgpath" id="imgpath1" value=""/>
<input type="hidden" name="oldimg" id="oldimg" value=""/>
<img alt="" width="120px;" height="60px;" src="" id="img1">

———————————————————————————————————————————————————————————————
$("#modKtype input[type='file']").live('change',function(){
var options2 = {
url : currentPath+"/knowledge/ajaxFileUpload",<span style="color:#33cc00;">//跳转到相应的Action    //form中已有upload的值</span>
type : "POST",//提交方式
dataType : "json",//数据类型
success : function(msg) {//调用Action后返回过来的数据
if(msg!="fail"){
$("#floatBox #modKtype #imgpath1").val(msg);
$("#floatBox #modKtype #img1").attr("src",currentPath+"/upload_imgs/knowledge/"+msg);
}else{
alert("图片上传失败");
}
}
};
$("#floatBox #modKtype").ajaxSubmit(options2);//绑定页面中form表单的id
});
(3)后台:
@Action("ajaxFileUpload")
public String ajaxFileUpload() throws Exception{
if(upload!=null){  //图片上传
//基于myFile创建一个文件输入流
InputStream is = new FileInputStream(upload);
// 设置上传文件目录
String uploadPath = ServletActionContext.getServletContext()
.getRealPath("/upload_imgs/knowledge");
String fileType = uploadFileName.substring(uploadFileName.lastIndexOf(".")+1,uploadFileName.length());
String newFileName = "knowledge"+StringUtil.getCurrentDateAndTime()+"."+fileType;
// 设置目标文件
File toFile = new File(uploadPath, newFileName);
// 创建一个输出流
OutputStream os = new FileOutputStream(toFile);
//设置缓存
byte[] buffer = new byte[1024];
int length = 0;
//读取myFile文件输出到toFile文件中
while ((length = is.read(buffer)) > 0) {
os.write(buffer, 0, length);
}
//关闭输入流
is.close();
//关闭输出流
os.close();

this.result = newFileName;
}else{
this.result = "fail";
}
return "json";
}
(4)删除图片:
String uploadPath = ServletActionContext.getServletContext().getRealPath("/upload_imgs/knowledge");
if(!oldimg.equals(imgpath)){
FileUtil.delFile(new StringBuffer().append(uploadPath).append("/").append(oldimg).toString());
}</span>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery JSP