html5实现拖拽上传头像

1. 将客户端（本地电脑）中的图片拖到网页中

要点： html5 拖放， FileReader

html:

js代码：

function drop(event) {

　　var file = event.dataTransfer.file[0];

　　var fileReader = new FileReader();

　　fileReader.readAsDataUrl(file);

　　fileReader.onload = function (){

　　　　var img = document.createElement('img');

　　　　img.style.width = '200px';

　　　　img.style.height = '200px';

　　　　img.src = fileReader.result;

　　　　// result数据格式为base64

　　　　document.body.appendChild(img);

　　}

转载于:https://www.cnblogs.com/tangyuu/p/9870601.html

html5实现拖拽上传头像相关推荐

[开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件
前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...
Nodejs express、html5实现拖拽上传（转载）
一.前言文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.node ...
HTML5文件拖拽上传记录
1 JS文件: 2 var FileName = ""; 3 var FileStr = ""; 4 (function () { 5 function $id ...
html5带拖拽上传的图片gallary
改的别人的程序,不能说原创吧,算半个原创 <!DOCTYPE html> <!-- saved from url=(0066)http://enjoyhtml5.com/hackat ...
html5 上传超大文件,HTML5教程如何拖拽上传大文件
本篇教程探讨了HTML5教程如何拖拽上传大文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性 ...
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式来上传电脑上 ...
拖拽上传技术-----html5[转载]
原网址:http://blog.163.com/mongying_net/blog/static/35112712012345352226/ 拖拽上传应用主要使用了以下HTML5技术: Drag&am ...
html5之多文件拖拽上传预览
最近对于html5预览功能很是感兴趣,特地拿出来研究一小下,并以一个小项目举例讲解. h5中的input有个type=file 就是文件上传控件,有个属性multiple就是h5新增的支持多选上传文件 ...
html ajax打包成app,利用HTML5与ajax完成拖拽上传文件
前言基于ajax的异步模式的上传控件,基本功能如下: 拖拽上传(利用HTML5新增特定拖拽事件以及 event的dataTransfer属性) 单文件/多文件切换(利用php实现单/多文件上传) ...
dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

html5实现拖拽上传头像

html5实现拖拽上传头像相关推荐

最新文章

热门文章