1.需要在你的HTML中引入ajaxfileupload.js
代码如下:
<script src="/static/js/ajaxfileupload.js"></script>
2.HTML静态代码如下:
<div class="c-item">
<ul>
<li class="glabel"><label><span class="r">*</span>SPU图片:</label></li>
<li class="ginput">
<span class="fileinput-button">
<i class="icon-white"></i>
<span>选择</span>
<input type="file" onchange="previewImage(this,'SPUImg')" name="files" id="files"/>
</span>
<span class="inline-helps">建议尺寸:800*800PX,单张大小不超过1M,最多可上传10张</span>
<div class="files" style="padding-top:5px;">
<img width="120" height="60" id="SPUImg"/>
</div>
</li>
</ul>
</div>
3.在js中添加previewImage()方法:
file指的是你input中所传入的图片,imghead指的是<img> 中的ID
/**图片上传 显示图片**/
function previewImage(file,imghead)
{
if (file.files && file.files[0])
{
var reader = new FileReader();
reader.onload = function(evt){
var image = new Image();
image.src = evt.target.result;
var img = document.getElementById(imghead);
img.src = evt.target.result;
};
reader.readAsDataURL(file.files[0]);
}
else //兼容IE
{
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
div.innerHTML = '<img id="'+imghead+'"/>';
var img = document.getElementById(imghead);
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div.innerHTML = "<div style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
}
}
4.调用$.ajaxFileUpload({});
fileElementId :指的是input的ID
function Upload(url,id){
$.ajaxFileUpload({
url:url,//处理图片脚本
type:'post',
fileElementId :id,//file控件id
dataType:'JSON',
secureuri :false,
success:function(data){
}
});
}
5. 后台接收所传的图片信息:
MultipartFile files:files指的是input中的name
@RequestMapping("/goIMAGE")
@ResponseBody
public Object goIMAGE(HttpServletRequest req,@RequestParam MultipartFile files) throws Exception {
file=files;
return doMyRequest("goIMAGE", "");
}
总结:
不管你是否是静态还是动态的生成的input框,都是可以上传图片的,上传多张图片,还没解决!!!
顺便提下回显
<img id=SKUImg>
$("#SKUImg").prop("src","../../"+data.list.SKUIMG);
这样就可以回显了!