码迷,mamicode.com
首页 > Web开发 > 详细

ajax上传图片

时间:2016-09-07 12:53:29      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

选择文件后 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>

ajax上传图片

标签:

原文地址:http://www.cnblogs.com/lijiahong/p/5848760.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!