关于$.ajaxFileUpload（）上传图片

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);

这样就可以回显了！