個人筆記,以備後用.
表體代碼:
<td colspan="3">
<s:file label="上傳" name="uploadFile" id="uploadNumFile" οnchange="fileUpload('uploadNumFile','goodsRecordDtl_goodsPicture','goodsPicture_img')" />
<a href="#" target="_blank" rel="external nofollow" title="檢視" οnclick="viewPic('viewPicture1','goodsPicture','goodsRecordDtl_goodsPicture');">檢視圖檔</a>
<div id="viewPicture1" title="圖檔預覽" style="display: none;" align="center">
<img id="goodsPicture" src="">
</div>
</td>
js代碼(記得要引入jquery庫和ajaxfileupload庫):
//上傳檔案id号
function fileUpload(uploadFileId,filePathId,imgId){
var imp= document.getElementById(uploadFileId);
if(imp==null ||imp==""||imp== undefined){
alert('請選擇檔案');
return;
}
$.ajaxFileUpload({
url:ct +"uploadFile.do",
secureuri:false,
fileElementId:uploadFileId,
dataType: 'multipart/form-data',
success: function (data, status){
var json = eval('(' + data + ')');
if(json.msg=="1"){
alert("上傳成功");
$('#'+filePathId).val(json.path);
$('#'+imgId).attr("src",eTrade.ctx+"/upload/"+json.path);
}else{
alert("檔案上傳失敗");
}
},
error: function (data, status, e){
alert(e);
}
});
}
function viewPic(dialogId,imgId,fileId){
$("#"+dialogId).dialog({
height: 350,
width: 600,
buttons: {
"取消": function() {
$("#"+imgId).attr("src","");
$(this).dialog("close");
}
},
close:function(){
$("#"+imgId).attr("src","");
}
});
if($("#"+fileId).val()==""){
return;
}
$("#"+imgId).attr("src",ct+"/toView.do?attachment="+$("#"+fileId).val());
}
背景代碼(uploadFile命名必須與前台name="uploadFile"值一緻):
private File uploadFile;
public File getUploadFile() {
return uploadFile;
}
public void setUploadFile(File uploadFile) {
this.uploadFile = uploadFile;
}
@Action(value = "uploadFile", results = { @Result(name = "success", type = "json", params = {
"ignoreHierarchy", "false","contentType","text/html", "root", "dataMap" }) })
public String uploadFile() {
try {
String UPLOAD_PATH= ServletActionContext.getServletContext().getRealPath("/upload/");
String randomName= UUID.randomUUID().toString()+ ".jpg";
if(uploadFile!=null){
File storageFile = new File(UPLOAD_PATH +"/"+randomName);
FileUtils.copyFile(uploadFile, storageFile);
}
dataMap.put("msg", 1);
dataMap.put("path", randomName);//檔案id号
} catch (Exception e) {
logger.error("", e);
dataMap.put("msg", 0);
}
return SUCCESS;
}
以上代碼可能有些不全,但是大體思路就是這樣,僅僅隻是為了以後用的時候友善檢視。