ajaxfileupload.js 网上一大把，自己可以去下载。

  

<!--隐藏图片上传input 组件的css定义 通用两种情况-->

.div1{

float: left;

height: 41px;

width: 144px;

position:relative;

}

.div2{

text-align:center;

padding-top:12px;

font-size:15px;

font-weight:800;

 height: 81px;

}

.inputstyle{

    width: 144px;

    height: 83px;<!--这个高度必须大于div2的高度 --> 

    cursor: pointer;

    font-size: 30px;

    outline: medium none;

    position: absolute;

    filter:alpha(opacity=0);

    -moz-opacity:0;

    opacity:0; 

    left:0px;

    top: 0px;

}

一：不显示input file，只有个div里面显示添加图片，点击div选择文件，点击上传按钮后才进行异步上传


    <div class="div1">

       <img src="p_w_picpaths/add.jpg" id="imgSd" class="div2"/> //p_w_picpaths/add.jpg m默认图片

       <input id="fileToUpload" type="file" name="fileToUpload" class="inputstyle"/>

    </div>

    <button οnclick="uploadButton();">上传</button>

   

    function uploadButton() {

$("#imgSd").attr("src","p_w_picpaths/p_w_picpaths/loading.gif");//显示上传加载图片

$.ajaxFileUpload({

   fileElementId: 'fileToUpload',//input file的id

   url: '/JunitPcWeb/upload/index',

   dataType: 'json',

   data: { id: 'aaa', name: 'bbb' },

   success: function (data, textStatus) {

     $("#imgSd").attr("src",data.path);//更换为上传的图片路径

   },

   error: function (XMLHttpRequest, textStatus, errorThrown) {

     $("#imgSd").attr("src","p_w_picpaths/add.jpg");

    // $.messager.showWin({ msg: msg, title: '错误提示', color: 'red' });  

   }

 });

     }

二：不显示input file，只有个div里面显示添加图片，点击div选择文件后立即自动异步上传

    

     <div class="div1">

<img src="p_w_picpaths/add.jpg" id="imgSd2" class="div2"/>

<input id="fileToUpload2" type="file" name="fileToUpload2" class="inputstyle"/>

     </div>



       /**

* 选择图片后自动开始上传 

**/

$("#fileToUpload2").change(function(){

$("#imgSd2").attr("src","p_w_picpaths/p_w_picpaths/loading.gif");

$.ajaxFileUpload({

   fileElementId: 'fileToUpload2',

   url: '/JunitPcWeb/upload/index',

   dataType: 'json',

   data: { id: 'aaa', name: 'bbb' },

   success: function (data, textStatus) {

     $("#imgSd2").attr("src","p_w_picpaths/icons/large_clipart.png");

   },

   error: function (XMLHttpRequest, textStatus, errorThrown) {

     $("#imgSd2").attr("src","p_w_picpaths/add.jpg");

    // $.messager.showWin({ msg: msg, title: '错误提示', color: 'red' });  

   }

 });

});

以上两种情况的核心并不在js，而是在css，css就是把input file设置为透明，并且覆盖整个div1，那么点击div里面的add.jpg其实是点击了透明的input file.

测试过ie,fir,google,360浏览器都正常。千万不要用dislapy=none的这种方式把file给弄隐藏了，这样ie为了安全性不让上传。