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="images/add.jpg" id="imgSd" class="div2"/> //images/add.jpg m默认图片
<input id="filetoUpload" type="file" name="filetoUpload" class="inputstyle"/>
</div>
<button onclick="uploadButton();">上传</button>
function uploadButton() {
$("#imgSd").attr("src","images/images/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","images/add.jpg");
// $.messager.showWin({ msg: msg,title: '错误提示',color: 'red' });
}
});
}
二：不显示input file，只有个div里面显示添加图片，点击div选择文件后立即自动异步上传
<div class="div1">
<img src="images/add.jpg" id="imgSd2" class="div2"/>
<input id="filetoUpload2" type="file" name="filetoUpload2" class="inputstyle"/>
</div>
/**
* 选择图片后自动开始上传
**/
$("#filetoUpload2").change(function(){
$("#imgSd2").attr("src","images/images/loading.gif");
$.ajaxFileUpload({
fileElementId: 'filetoUpload2',
url: '/JunitPcWeb/upload/index',textStatus) {
$("#imgSd2").attr("src","images/icons/large_clipart.png");
},errorThrown) {
$("#imgSd2").attr("src",color: 'red' });
}
});
});
以上两种情况的核心并不在js，而是在css，css就是把input file设置为透明，并且覆盖整个div1，那么点击div里面的add.jpg其实是点击了透明的input file.
测试过ie,fir,google,360浏览器都正常。千万不要用dislapy=none的这种方式把file给弄隐藏了，这样ie为了安全性不让上传。