由于前端是不能直接操作本地文件的，要么通过用户点击选择文件或者拖拽的方式，要么使用 flash 等第三方的控件，但 flash 日渐衰落，所以使用 flash 还是不提倡的。同时 html5 崛起，提供了很多的 api 操控，可以在前端使用原生的 api 实现图片的处理，这样可以减少后端服务器的压力，同时对用户也是友好的。

由于前端是不能直接操作本地文件的，要么通过用户点击选择文件或者拖拽的方式，要么使用 flash 等第三方的控件，但 flash 日渐衰落，所以使用 flash 还是不提倡的。同时 html5 崛起，提供了很多的 api 操控，可以在前端使用原生的 api 实现图片的处理，这样可以减少后端服务器的压力，同时对用户也是友好的

以上就是图片前端压缩并上传demo的完整演示。 要想使用JS实现图片的压缩效果，原理其实很简单，核心API就是使用canvas的drawImage()方法。 各参数具体含义可以参见“Canvas API中文文档-drawImage”，这里不展开。 把大图片画在一张小画布上，压缩…

第一种是最常用的手段，通常还会自定义一个按钮，然后盖在它上面，因为type="file"的input不好改变样式。如下代码写一个选择控件，并放在form里面： 可以看到文件的路径是一个假的路径，也就是说在浏览器无法获取到文件的真实存放位置。同时FormData打印出来是一个空的…

在日常项目开发中，图片上传是一个十分常见的场景。而现在的各种UI框架都提供了自己的上传组件，网上第三方的上传组件也多如牛毛。可能你早已习惯了直接使用这些现成的组件，然而对于其具体的实现，却并未深入解析。本文将通过简单的代码，为你解析图片上传的各个知识点。 既然是上传，肯定需要使…

WebUploader 是一个简单的以 HTML5 为主，FLASH 为辅的现代文件上传组件。在现代的浏览器里面能充分发挥 HTML5 的优势，同时又不摒弃主流 IE 浏览器，延用原来的 FLASH 运行时，兼容 IE6+，Andorid 4+，IOS 6+。两套运行时，同样的调用方式，可供用户任意选用。 支持大文件分片并发上传，极大的提高了文件上传效率。