关于文件上传的操作

今天有史以来第一次接触文件上传的功能，觉得有必要记录一下。

原理：将文件传到服务器上，接口返回文件在服务器上的地址。

实现：

<form action="testB.html?callback=a" method="submit" target="bbb">
    <input type="submit" name="submit">
</form>
<iframe src="" name="bbb"></iframe>
<script>
    var a = function(r) {
        alert(r.data.file_info.file_address);
    }
</script>

在文件变化的时候onchange()， 这里用submit模拟，发送一个同步请求到接口，这个接口在action属性里面配置，callback属性值为接口返回后执行的方法名， 这里用testB.html模拟。

target属性值是把返回的内容在iframe中显示，这一步是为了避免页面刷新。target的属性值必须和iframe的name属性值对应。

请求发出后，会发现iframe里已经加载了testB.html的内容了

iframe通过parent.functionName();来调用父页面的方法，父窗口通过myFrame.window.functionName(); 调用子窗口的方法。

后端返回的数据必须在<script></script>之中，这样在页面加载进来的时候就会执行。

然后在前端只需要像异步接口.success()方法那样操作返回的数据就可以了。

对了，不要在本地尝试（直接用浏览器打开的、地址栏是file:///的页面）哦，会报Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.错误，错误的意思是：未捕获的安全错误：阻止了一个域为null的frame页面访问另一个域为null的页面。这应该是跨域方面的问题，不是很了解，放在服务器上就正常啦！

======================================================================================================

看起来还是蛮简单的，因为之前没有做过，一直在好奇前端给上传文件的那个接口到底传啥，现在才知道根本不需要知道要传啥啊，直接文件变化的时候模拟一个提交操作，就可以啦……

<form action="testB.html?callback=a" method="GET" target="bbb">
    <input type="file" οnchange="abc.click()">
    <button type="submit" id="abc"></button>
</form>

在此万分感谢我导师斌哥，超耐心！！！