关于拖拽上传图片的详细介绍

本篇文章主要介绍了HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量），现在html5提供了API以及File，FileReader，XMLHttpRequest等强大的API，为我们拖放实现上传提供了可能。有兴趣的可以了解一下。上传基本是项目中经常出现的，一般采用：1、form提交2、flash3、HTML5form提交会刷新页面，很难做到异步上传；flash可能是用得比较多了，因为可以兼顾到几乎所有的浏览器，我之前一直会用jQuery的uploadify作为项目中的上传工具，uploadify也有基于Html5好像是收费的，大家可以去官网看看；当然了，现在html5提供了API以及File，FileReader，XMLHttpRequest等强大的API，为我们拖放实现上传提供了可能。效果图1：效果图2：由于本地上传实在太快，录了个80M的gif，终于可以看到上传的细节效果了，

1. HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量）的详情介绍

简介：本篇文章主要介绍了HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量），现在html5提供了API以及File，FileReader，XMLHttpRequest等强大的API，为我们拖放实现上传提供了可能。有兴趣的可以了解一下。

2. HTML5/CSS3 经典案例-无插件拖拽上传图片（二）

简介：上一篇已经实现了这个项目的整体的HTML和CSS：HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （一）这篇博客直接在上篇的基础上完成，最终效果：效果图1：效果图2：好了，请允许我把图片贴了两遍，方便大家看效果了~可以看出我们的图片的li的html其实还是挺复杂的，于是我把html文档做了一些修改：

3. HTML5/CSS3 经典案例-无插件拖拽上传图片（一）

简介：form提交会刷新页面，很难做到异步上传；flash可能是用得比较多了，因为可以兼顾到几乎所有的浏览器，我之前一直会用jQuery的uploadify作为项目中的上传工具，uploadify也有基于Html5好像是收费的，大家可以去官网看看；当然了，现在html5提供了API以及File，FileReader，XMLHttpRequest等强大的API，为我们拖放实现上传提供了可能。

4. JS HTML5拖拽上传图片预览

简介：这篇文章主要为大家详细介绍了JS HTML5拖拽上传图片预览的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

5. html5 拖拽上传图片实例演示_html5教程技巧

 
界面样式我是参考了一个国外的相册网站，改动不大，只是把鸟语转换成中文，以及上传时的样式也进行了改动，之所以选这个的原因就是，我很容易做扩展，它支持3种方式添加图片，一种拖拽上传，一种常规的选" width="400">

简介：拖拽上传最重要的就是js部分的代码，它实现了70%的功能，另外30%仅仅是把图片信息提交到后台，然后做对应的处理，比如压缩啊，裁剪啊云云，感兴趣的朋友可以参考下哈，希望可以帮助到你

【相关问答推荐】：

javascript - 请教js实现拖拽上传图片的实现思路

Atas ialah kandungan terperinci 关于拖拽上传图片的详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!