Web文件上传问题总结

前端时间公司让利用web开发一个移动端的图片上传功能；需要能在微信和移动端浏览器中打开连接并上传，立马想到用Html5上传，手机基本都支持的；

由于默认的input[File]标签太丑，于是在网上找了些比较好看的上传插件http://www.jq22.com/jquery-info13194作为前端的上传组件，后台用的一般处理文件接收文件保存，OK没问题。

交工时领导说能不能写个服务端接口，以后公司所有项目的文件上传都往这个接口上传，统一文件接收入口，于是让写个WebAPI，用来替换一般处理程序，接收文件。问题来了，WebApi也需要部署到iis将会造成和原有项目的一个跨域访问安全问题，浏览器不让通过。网上一般搜索后决定用Cors来解决跨域问题：

1、在WebApi的Web.config文件中配置

2、在WebApiConfig.cs文件中启用Cors

 

 3、aspx文件中利用FileReader对象读取文件上传到WebApis接口中；

清理一下浏览器缓存，发现可以上传了。

该移动端网站对应的还有个PC端程序，也需要上传图片，然后同事就将我的这段代码拷贝到他的程序中了，简单测试没发现啥问题。可测试人员发现在IE9中会出现脚本错误无法上传，查看发现就IE9不支持FileReader对象....。

简直对IE没脾气了，pc端又只能换用Flash上传了，又在网上找了一个插件http://www.uploadify.com/demos/，可是前端解决了可后台WebApi没法接收Flash上传的文件，怎么办？尝试着在WebApi解决方案中添加一般处理程序文件，来接收Flash上传的文件。可是浏览器又提示跨域问题......，百度上找到解决方案，在WebApi下面下添加crossdomain.xml文件，内容：

aspx文件：

上传是没有问题了 ，但是程序需求是需要控制上传数量的。移动端input[File]标签上传的好办，可Flash中怎么在弹出文件对话框前判断需要上传的图片数量，翻阅uploadify官方API也没找到适合我需求的。那就用最笨的办法吧。

1、每次打开Dialog时判断最多能上传的数量

2、开始图片上传时，判断剩余数量，小于等于0时，后面上传队列中所有的都设置为cancel，取消上传；然后隐藏掉上传按钮；

3、上传结束后，一样判断剩余数量

至此，我的上传功能才算完成。

 

转载于:https://www.cnblogs.com/memoryfragment/p/6840811.html