关于$.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);

这样就可以回显了！