图片上传功能（html+js）

   关于图片上传现在比较流行点是flash上传，但在网络不给力或某些浏览器下flash就不能用了，所以各大网站不管flash上传做的多炫，都会保留最原始的图片上传功能通常叫做“普通上传”。

 

       我做这个“普通上传”也是这个原因，下面分享的就是做这个功能时的一些思路。

 

1、无刷新上传

 

ajax不能上传二进制，所以只能放弃这个方法了。

        用原始的form提交会跳转，iframe就派上用场了，把form表单提交一个隐藏的iframe标签中就可以实现伪无刷新了，

 

 

<form method="post" name="formupload" target="normalupload" enctype="multipart/form-data"action="/util/image/_upload">

<input type="file" name="upload" value="" ><span></span> 

<input type="submit"  />

</form>

<iframe scrolling="auto" id="iframe_data" frameborder="no" marginheight="0" style="display:none;"name="normalupload"></iframe>

在form上加target=" normalupload "，这样就ok了，其实很简单滴，点提交后用firebug可以看到返回的数据都在那个隐藏的iframe里。

2、处理返回数据

 

上传成功后，就需要处理服务器端返回数据，iframe有个onload事件，上传后用onload监听就可以了。

iframe.on('load',function(){

//处理返回数据

//html为返回的数据

var doc = iframe.contentWindow.document,
html = doc.body.innerHTML;

if(html!=''){

//TO DO other

}
});

3、多张图片上传

 

一个form只能上传一张，就需要添加多个form然后顺序提交，这里是用input[type="file"]的onchange事件自动为添加一个form（检测所选文件格式正确后），我做的是一次最多上传5张，当form的长度大于5时，就不添加form了。

var changeFun =function(){
var val =this.value,//获取图片名称
imgName = val.substring(val.lastIndexOf('.')+1,val.length),//图片格式
name = imgName.toLowerCase(),
spanNode = H.ui(this.parentNode).tag('span')[0];
if(name!='jpg'&&name!='jpeg'&&name!='gif'&&name!='png'){//验证图片格式
spanNode.innerHTML ='图片格式不对，请重新选择！';
spanNode.className ='err';
this.value ='';
}else{
if(spanNode.innerHTML !=''){
spanNode.innerHTML ='';
spanNode.className ='';
}
var forms = pannel.tag('form'),len = forms.length;
if(len >=5){//验证form长度，最多添加5个
return;
}
var oldnode = pannel.tag('form')[0];
var newnode =oldnode.cloneNode(true);
if(oldnode.action.indexOf('rules')==-1){
newnode.action += rules;
}
var input = H.ui(newnode).tag('input');
input[0].value ='';
_pannel.appendChild(newnode);//插入form
input[0].onchange = changeFun;//为新的input绑定onchange事件
}
};
normal_upload.tag('input')[0].onchange = changeFun;

 

 

用firebug可以看到已添加的多个form

 

 

 多个form提交时就比较麻烦一点，网上有用settimeout的，我现在还没弄明白怎么回事。我的方法是，

点击“上传”按钮时，提交第一个form，然后用onload事件监听iframe，当第一张图片上传成功并返回值后，在上传下一个form，就这样依次上传就可以了。

调用submitform（success）,并告知是否上传成功

//提交表单

function submitform(success){
var forms = pannel.tag('form'),
len = forms.length;
isSubmit =true,
spanNote = pannel.tag('span');

if(typeof success =='boolean'){
if(success){
spanNote[uploadnum].innerHTML ='上传成功';
}else{
spanNote[uploadnum].innerHTML ='上传失败';
}
uploadnum++;
}
if(uploadnum >= len){
returntrue;
}
var imgVal = H.ui(forms[uploadnum]).tag('input')[0].value;
if(imgVal ==''){
isSubmit =false;
}else{
spanNote[uploadnum].innerHTML ='上传中...';
}
if(!isSubmit){
returntrue;
}
forms[uploadnum].submit();
returnfalse;

};

 

到这里这个图片上传的功能就做完了。

 

在做的过程中遇到的问题，

  1、无刷新的问题已经很清楚了

  2、input的change事件，ie并不支持，所以只能用onchange