ajax 多图片上传
图片上传一般是用form表单的，类型 enctype=”multipart/form-data”>用ajax一般 两种方法一种是动态创建表单，提交到iframe里，然后进行处理 ，下面介绍另一种方式
html 里必须要有type=”file” 的input 传输stream
html代码如下：
[well]
<div class=”contentinner”>
<ul>
<!–
<li>
<img src=”../../images/cs.jpg” alt=””/>
<em></em>
</li>
–>
<li>
<span class=”b_addpic”></span>
<input type=”file” name=”Filedata” multiple=”multiple” id=”Filedata”/>
</li>
</ul>
</div>
[/well]
JS处理方式如下：
//要注意的是ajax两个属性取值是
processData:false,
contentType : false,否则后台取不到 GET 或POST的数据
[well]
function upload(){
var img= new FormData();
var pic = $(“Filedata”);
var fileObj= pic.get(0).files; //console.log(fileObj);
img.append(“gimg”, fileObj[0]);
$.ajax({
url : ‘http://test.vogue.qq.com/Uploadpic/Upload/’,
data : img,
cache:false,
processData:false,
contentType : false,
dataType : ‘json’,
type : “POST”,
success:function(data){
var _getdata = data.url;
var _htmlcon = “”;
for(var i in _getdata){
_htmlcon += ‘<li>’;
_htmlcon += ‘<img src=”‘+_getdata[i]+'” alt=””><em></em>’;
_htmlcon += ‘</li>’;
}
comment.numPic = _getdata.length + comment.numPic;
if(comment.numPic < 5){
$(“.imgcontent”).find(“ul”).prepend(_htmlcon);
if(comment.numPic == 4){
$(“.imgcontent ul”).find(‘li:last-child’).hide();
}
comment.clickall();
}else{
alert(“最多只能传4张哟”);
}
}
});
}
window.onload = function(){
var input = document.getElementById(“Filedata”);
var result= document.getElementById(“result”);
var img_area = document.getElementById(“img_area”);
if ( typeof(FileReader) === ‘undefined’ ){
result.innerHTML = “抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！”;
input.setAttribute( ‘disabled’,’disabled’ );
} else {
input.addEventListener( ‘change’,readFile,false );
}
}
function readFile(){
var data = new FormData();
for(var i = 0;i < this.files.length;i++){
data.append(“Filedata”+i,this.files[i])
}
upload(data);
}
[/well]
