jquery 上传图片 java_jquery 异步提交表单 上传图片小例子
這次做ecshop項目用到了一些小東西，這里我就把在項目中用到的一個異步上傳多個產品圖片的小東西，不是多好，但是是我自己查資料搞出來的。放這里，給自己和大家一個參考，歡迎丟磚！(jquery+spring mvc +jquery.form.js).上代碼：
一.傳統型：
1.jsp頁面(上傳3張圖片)注意：這里各個form表單里的DOM的ID都是有顧慮的哦
這里用到了一個jquery.form.js他是jquery中用來異步提交表單的插件
寶貝圖片1：
寶貝圖片2：
?
寶貝圖片3：
?
$(document).ready(function() {
/* 圖片上傳 */
$(".imgSave").click(function(){
var objhid = $(this).next().val();//處理多個form獲取相關對象問題
if ($("#imgInput"+objhid).val() == "") {//先判斷是否已選擇了文件
alert("please select a p_w_picpath to upload!");
return;
}
$("#imgid"+objhid).css("display","block");
$("#uploadImgForm"+objhid).ajaxSubmit({
dataType:'text',/
success:function(msg){//文件上傳成功后執行,msg為服務器端返回的信息
var newimg = msg.substr(0,msg.length-1);
$("#Id"+objhid).val(newimg);
$("#imgid"+objhid).attr("src",newimg);
}
});
$("#imgInput"+objhid).val("");//清空文件域
return false; //防止刷新？
});
});
2.java控制器
/**
* 異步上傳產品圖片action
* @param request
* @param response
*/
@RequestMapping(value = "ajaximg", method = RequestMethod.POST)
public void ajaxGoodsImg(MultipartHttpServletRequest request,
HttpServletResponse response) {
PrintWriter out = null;
try {
response.setContentType("text/xml; charset=UTF-8");
// 以下兩句為取消在本地的緩存
out = response.getWriter();
MultipartFile p_w_picpathfile = request.getFile("photo");
HttpSession session = request.getSession();
String flag = null;
if (null != p_w_picpathfile && 0 != p_w_picpathfile.getSize()) {
flag = Digest.saveFile(//這個方法就是具體的實現保存文件的功能了，若成功返回文件全路徑，若失敗則返回false字符串，這個方法自己看著寫吧
session.getServletContext().getRealPath(""), p_w_picpathfile);
if (flag == "false") {
out.write("false");
}
out.write(flag);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (out != null) {
out.close();
}
}
}
二.spring + ajaxfileupload.js 實現不要表單異步上傳圖片
function uploadImage(fileId) {
$.ajaxFileUpload({
url:'/admin/article/addnewsp_w_picpaths',//用于文件上傳的服務器端請求地址
secureuri:false,//一般設置為false
fileElementId:fileId,//文件上傳空間的id屬性 ?
dataType: 'text',//返回值類型 一般設置為json
// data: {'faceurl':artType},擴展參數
success: function (data, status) ?//服務器成功響應處理函數
{
var fileInfo = jQuery.parseJSON(data);
alert("上傳成功，返回圖片路徑:"+fileInfo.file_path);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
return false;
}
java---Controller
@ResponseBody
@RequestMapping(value = "article/addnewsp_w_picpaths", method = RequestMethod.POST,produces="application/json")
public Map ajaxNewsUplodImg(MultipartHttpServletRequest request, HttpServletResponse response) {
response.setContentType("text/plain; charset=utf-8");
Map result = new HashMap();
MultipartFile file = request.getFile("file");
try {
if (!file.isEmpty()){
String orgFileName = file.getOriginalFilename();
if (Digest.isAcceptedFileType(orgFileName)) {
result.put("file_path",具體上傳圖片工具方法);
} else {
response.setStatus(HttpStatus.UNSUPPORTED_MEDIA_TYPE.value());
}
} else {
response.setStatus(HttpStatus.UNPROCESSABLE_ENTITY.value());
}
} catch(Exception e) {
response.setStatus(HttpStatus.INTERNAL_SERVER_ERROR.value());
Logger.getLogger(ArticleController.class.getName()).log(Level.SEVERE, null, e);
}
return result;
}
總結
以上是生活随笔為你收集整理的jquery 上传图片 java_jquery 异步提交表单 上传图片小例子的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 桥本有菜java,深入浅出Extjs4.
- 下一篇： java excel 兼容问题_java