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

利用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. Anjuta 调试无输出 warning: GDB: Failed to set controlling terminal

    调试无输出,起初以为是那个warning的问题,后来才知道这个系统printf直到遇到'\n'换行符才输出,VC6用习惯了没想到还有这样的,网上说这样是节省系统资源. 那个warning暂时还没看到影 ...

  2. swfupload 在ie9以上浏览器报错问题记录

    解决办法: swfuploadl.js line 840左右 SWFUpload.prototype.cleanUp if (typeof(movieElement[key]) === "f ...

  3. 基于curl 的zabbix API调用

    1,认证并取得加密字段 curl -i -X POST -H 'Content-Type: application/json' -d '{"jsonrpc":"2.0&q ...

  4. Shtirlits - SGU 125(搜索)

    题目大意:B[i, j]表示周围有多少个比它大的数,能否用B数组构造出一个A数组,如果不能输出“NO SOLUTION”. 分析:数据规模比较小,可以直接暴力枚举每个点的值. 代码如下: #inclu ...

  5. Spring AOP配置与应用

    1.     两种方式: a)     使用Annotation b)     使用xml 2.     Annotation a)     加上对应的xsd文件spring-aop.xsd b)   ...

  6. winform 菜单项显示历史记录 分类: WinForm 2014-07-11 18:15 196人阅读 评论(0) 收藏

    (1)创建一个项目,将其命名为MenuHistory,默认窗体为Form1. (2)从工具箱中向Form1窗体添加MenuStrip控件,同时向窗体添加OpenFileDialog控件.创建一个&qu ...

  7. [转] 用管道获得shell 命令的输出

    用管道: 通过fgets(buf, n, ptr)buf就可以得到命令“ps -ef"一样的信息, 读帮助”man popen": char *cmd = "ps -ef ...

  8. unlocker208安装之后看不到Apple macos选项,解决办法.

    前段时间升级了win10,最新的unlocker208安装以后看不到mac os的选项,为什么呢?我们在管理员允许win-install.cmd的过程中,会在cmd中看到这么一句话:LookupErr ...

  9. Codeforces 231E - Cactus

    231E - Cactus 给一个10^5个点的无向图,每个点最多属于一个环,规定两点之间的简单路:从起点到终点,经过的边不重复 给10^5个询问,每个询问两个点,问这两个点之间有多少条简单路. 挺综 ...

  10. 【转】纯 CSS 实现高度与宽度成比例的效果

    先来演示页面:Demo; 转的内容: 最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 C ...