实现拖拽图片,在上传至服务器前,显示图片并操控大小

利用HTML5

dragenter

dragover

dragleave

drop

在实现图片显示方面,用了FileReader这个类

var files=event.dataTransfer.files;//获取拖拽的图片集合

filereader.readAsDataURL(files[i]);

利用this.result

<img src='"+this.result+"'/>显示图片到页面

若想获得图片大小,需要重新实例一个Image对象:

var img = new Image();//创建image对象
img.src =innerimg.attr("src") ;//此处innerImg指的就是上传的图片jQuery对象
var w = img.width;
var h=img.height;

关于FileReader的相关信息,可以看http://www.helloweba.com/view-blog-224.html

FileReader上传图片的更多相关文章

  1. html5使用FileReader上传图片

    客户端代码是网上找的,修改为.net代码. <html><head>    <meta charset="utf-8">    <titl ...

  2. New FileReader上传图片

    function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader() ...

  3. fileReader 上传图片

    function getImgSrc(target, callback) { if (window.FileReader) { var oPreviewImg = null, oFReader = n ...

  4. 上传图片获取base64编码、本地预览

    一.读取文件的对象 — new FileReader()   上传图片接口参数有图片base64编码(数组, imgBase64List ),主要用到 读取文件的对象 [ new FileReader ...

  5. 利用FileReader实现上传图片前本地预览

    引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...

  6. JavaScript 中的FileReader对象(实现上传图片预览)

    方法一:使用js的FileReader对象 1.FileReader对象简介 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new Fi ...

  7. js上传图片&预览(filereader)

    fileReader HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileRea ...

  8. JS上传图片-通过FileReader获取图片的base64

    下面文章,我想要的是: FileReader这个对象,可以借助FileReader来获取上传图片的base64,就可以在客户端显示该图片了.同时,还可以把该图片的base64发送到服务端,保存起来. ...

  9. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

随机推荐

  1. JavaScript 设计风格&模式 概览 20140418

    基本的概念 在JavaScript中,一旦定义好一个变量,该变量会自动成为内置对象的一个属性,(如果该变量是全局变量,那么会成为全局对象的一个属性). 定义的变量实际上也是一个伪类,拥有自身的属性,该 ...

  2. zoj 3659 Conquer a New Region(并查集)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4882 代码: #include<cstdio> #inc ...

  3. Django中的CSRF

    CSRF(Cross Site Request Forgery, 跨站域请求伪造) CSRF 背景与介绍 CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的 ...

  4. UVa12171 hdu2771 UVaLive4291 Sculpture

    填坑系列(p.171) orz rjl 代码基本和rjl的一样 #include<cstdio> #include<cstring> #include<cstdlib&g ...

  5. winform 五子棋 判断输赢 分类: WinForm 2014-08-07 20:55 256人阅读 评论(0) 收藏

    新手上路,高手勿进! 利用数组,根据新旧数组值的不同,获取那个点是什么棋子: 说明: 棋盘:15*15; 定义4个全局变量: string[,] stroldlist = new string[15, ...

  6. 新站上线啦,Html5Think,H5优秀资源的收集、学习、分享和交流

    最近闲来做了个H5资源站,刚刚有点资源,可以访问交流下. 栏目: H5网站模板 H5动画特效 H5资源工具 H5学习资料 致力于H5的学习,通过各个H5优秀案例的学习,逐步完善自己的H5体系,有朝一日 ...

  7. codechef Turbo Sort 题解

    Input t – the number of numbers in list, then t lines follow [t <= 10^6].  Each line contains one ...

  8. zTree实现地市县三级级联报错(一)

    zTree实现地市县三级级联 1.详细报错例如以下: java.lang.IllegalStateException: Failed to load ApplicationContext at org ...

  9. [AngularJS + Unit Testing] Testing Directive's controller with bindToController, controllerAs and isolate scope

    <div> <h2>{{vm.userInfo.number}} - {{vm.userInfo.name}}</h2> </div> 'use str ...

  10. Android自定义drawable(Shape)详解

    在Android开发过程中,经常需要改变控件的默认样式, 那么通常会使用多个图片来解决.不过这种方式可能需要多个图片,比如一个按钮,需要点击时的式样图片,默认的式样图片. 这样就容易使apk变大. 那 ...