需求,图片上传,需要浏览完后就在指定位置显示图片,支持所有浏览器。
分析,不能只用JS完成,不可能支持所有浏览器,所以只能用后台技术。
JSP:
<dl class="l UbLeft">
<dt><a href=""><img src="${basePrefix}/images/meh.jpg" id="photo1-img" width="108" height="105" /></a><input type="hidden" id="photo1-val" name="url1" value=""/></dt>
<dd><input type="file" id="photo1" class="Dina l" name="userPic" onchange="uploadUserPicMore(this)"/><a href="javascript:void(0)" onclick="delUpload(1)"><f:message key="member_jsp.jsp.photo.uploadPhoto.jsp.delete" /></a></dd>
</dl>
js:
[html] view plaincopy
function uploadUserPicMore(file){
var id = $(file).attr('id');
$("#loading").ajaxStart(function(){
$(this).show();
}).ajaxComplete(function(){
$(this).hide();
});
$.ajaxFileUpload(
{
url:'/uploadUserPic.html',
secureuri:false,
fileElementId:id,
dataType: 'json',
data:{},
success: function (data)
{
$("#"+id+"-img").attr("src",data.url);
$("#"+id+"-val").val(data.url);
},
error: function (data, status, e)
{
alert(e);
}
}
);
return false;
}
最新内容请见作者的GitHub页:http://qaseven.github.io/
时间: 2024-11-03 21:10:22