异步上传图片和文件同个页面可多个

css样式

.sp{
display: inline-block;
width: 200px;
height: 150px;
position: relative;
line-height: 36px;
font-size: 16px;
color: white;
border-radius:5px;
border:1px solid #ddd;
}
.sp>input[type="file"]{
position: absolute;
width: 200px;
height: 150px;
top: 0;
left: 0;
opacity: 0;
filter:alpha(opacity=0);   
   -moz-opacity:0;   


}
.im{
position: absolute;
top: 0;
left: 0;
display: none;
width: 90%;
height:96%;
border:1px solid #ddd;
margin:2% 5%;
}
.fi{
position: absolute;
top: 0;
left: 0;
width:90%;
height:96%;
background:#aaa;
text-align: center;
display: none;
font-size: 16px;
margin:2% 5%;
}

html代码

       
       
       

 
     

 
       
       

JS代码

function readLocalFile(inid,a,hidden,img) {  /* 参数变量 为file发送的ID 文件的路径 隐藏input的ID 图片显示的ID */ 
var formData = new FormData(); /* 获取对象 */
formData.append("file", $(inid)[0].files[0]) /* 传参数 */
if (a == "file") { /* 文件格式 */
$.ajax({
url: 'http://localhost:8180/etong105/base/fileUpload',/*上传的图片的路径*/
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(data) {
$(".fi").show(500)
var str = $(inid).val();  /*获取文件的路径*/
var ss = str.split('\\'); /*分割文件的路径为数组*/
$(".fi").text(ss.pop()) /*获取最后的一个数组 即是文件的名称*/
$(hidden).val("22")

},
error: function(data) {
alert(data);
}
});
}
if (a == "img") { /* 图片格式 */
$.ajax({
url: 'http://localhost:8180/etong105/base/imageUpload', /*上传的文件路径*/
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(data) {
$(img).css("display", "block")
$(img).attr("src", "http://" + data.result) /*获取后台送过来的图片路径赋予页面展示*/
$(hidden).val("22")
},
error: function(data) {
alert(data);
}
});

}
}