jQuery+html5 drag and drop upload image preview code

14Jan2017

This article mainly introduces the relevant information of JS HTML5 drag and drop upload image preview for everyone. It has certain reference value. Interested friends can refer to it.

 
界面样式我是参考了一个国外的相册网站，改动不大，只是把鸟语转换成中文，以及上传时的样式也进行了改动，之所以选这个的原因就是，我很容易做扩展，它支持3种方式添加图片，一种拖拽上传，一种常规的选" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" alt="html5 drag and drop upload image example demonstration_html5 tutorial skills">

16May2016

The most important part of drag-and-drop upload is the js part of the code, which implements 70% of the functions. The other 30% is just to submit the image information to the background and then do the corresponding processing, such as compression, cropping, etc., for those who are interested You can refer to it, I hope it can help you

30Mar2017

If the file is txt text, use the readAsText method of FileReader to read the file as text (default is UTF-8 format), put it into memory, and then display it in the DIV.

13Mar2017

This article mainly introduces a simple example of dragging and uploading files in HTML5. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

12Mar2018

This time I will show you how to make a drag-and-drop image upload preview component in H5. What are the precautions for making a drag-and-drop image upload preview component in H5? Here is a practical case, let’s take a look.

27Mar2017

Drag-and-drop uploading of html5 files is an old topic. There are many examples on the Internet. The code I originally found and modified was found online. I just wanted to record the process after stepping on a few pitfalls.

30Mar2018

This article mainly shares with you the HTML5 code to implement drag-and-drop batch upload of files. This component is implemented based on Vue.js. The UI framework is elementUI. The complete demo address is at https://github.com/Msxiaoma/upload-folder. Drag-and-drop upload Folder (only supported by chrome).

16May2016

This article mainly introduces the jQuery plug-in jcrop Fileapi to perfectly implement the code of image upload, cropping and preview. It is very simple and practical, and the effect is great. Friends in need can refer to it.