ajax上传图片

Posted 2020-08-07 加洲旅馆2012

选择文件后 ajax上传图片到后台，后台执行保存操作，返回上传的图片路径，显示到页面

需要引入ajaxfileupload.js

js代码

<script type="text/javascript">
$(function() {
$("#file").live("change", function() {//现在这个已经适用于多个file表单。
ajaxFileUpload($(this).attr("id"), "rImg");
})
})
function ajaxFileUpload(file_id, img_id) {
var base = "${basePath}";
jQuery.ajaxFileUpload({
url : ‘${basePath}/upload/uploadTemp‘, //用于文件上传的服务器端请求地址
secureuri : false, //是否需要安全协议，一般设置为false
fileElementId : file_id, //文件上传域的ID
dataType : ‘json‘, //返回值类型 一般设置为json
success : function(data, status)//服务器成功响应处理函数
{

if (data.errorCode == "success") {
$("#" + img_id).attr("src", base + data.data);
$("#pic").val(data.data);
//alert("ok:"+data.data);
} else {
alert("error：" + data.data);
}
},
error : function(data, status, e)//服务器响应失败处理函数
{
alert("图片上传失败");
}
})
return false;
}
</script>

 

html div

<div class="control-group">
<label class="control-label">服务项LOGO</label>
<div class="controls">
<input type="file" accept="image/*" name="file" id="file" /> <input
type="hidden" name="pic" id="pic" value="${service.pic }">
</div>
<div class="controls">
<img id="rImg"
<c:if test="${service.pic != null}">src="${imgPath}${service.pic}"</c:if>
style="width: 100px">
</div>
</div>