javascript 无刷新上传图片之原理

刚开始我认为可以像ajax 那样获取到数据然后通过ajax 发送请求，后来发现浏览器为了客户端的安全默认并没有给javascript 这个权限。这个方法当然是行不同了。我看了好像开源的上传图片原理，当然大部分是flash。但是为了方便使用js的也不少。 
原理都是使用iframe 上传，在from标签里面有个属性 和a 标签一样 target，target标示这个表单的数据提交的目的地。target里面写iframe的name ，这样表单的数据就提交到了这个 iframe里面。
根据这个原理实现方法：
通过 javascript动态的创建一个 form 和一个  iframe，来上传图片。

如：

<iframe name="ss"></iframe>
<form target="ss" action="a.php" enctype="multipart/form-data">
    <input type="file" onChange="this.submit();">
</form>

这个form的提交就会提交到上面那个iframe 里面，也就是后台的输出结果页在iframe里面，用 onChange="this.submit();" 让用户选择好图片时即可上传。

如在易U里面写的规则是，在一个表单里面的按钮加上 fname 这样一个属性 就会在这里创建一个自动上传

<form action=""  method="get">
<input type="button" fname="uimg" funstr="function(){document.title='图片正在上传……';}" funbak="ddd" furl="a.php" value="本地上传">
</form>

　　看是一个button 其实一个自动上传，其中ddd是用来获取上传结果的js函数，其他参数说明情况易U官网文档 http://www.yxsss.com/ui/form

js函数：

function ddd(da){
        
        if(da.ztai){
                document.title='上传完成';
                ui.success('上传成功保存地址为'+da.url);
        }
}

后台接收a.php

$path='a.jpg';
move_uploaded_file($_FILES['uimg']['tmp_name'],$path);
exit(json_encode(array('ztai'=>true,'url'=>$path)));

然而这东西一次最多只能传递一个文件。如果用户需要上传整个相册或者多张图片，那么技术人员只好从其他途径想办法了，比如Flash或者JS。但是现在通过HTML5提供的新标签，我们就可以完全不需要那些额外的东西了。HTML5为上传文件提供了几个新标签，比如multiple就是为了支持多文件上传专用的。multiple是一个bool标签来表示是否允许用户上传多个文件。比如：

<form target="ss" action="a.php" enctype="multipart/form-data">
	<input type="file" onChange="this.submit();" multiple>
</form>

在最新版的Safari, Chrome, FireFox, IE以及Opera都是支持的。