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

利用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. ACM3787

    /* 问题说明 给定两个整数A和B,其表示形式是:从个位开始, 每三位数用逗号","隔开. 现在请计算A+B的结果,并以正常形式输出. 输入 输入包含多组数据数据,每组数据占一行, ...

  2. 常用shell变量$#,$@,$0,$1,$2等

    常用shell变量$#,$@,$0,$1,$2的含义解释: $$ Shell本身的PID(ProcessID) $! Shell最后运行的后台Process的PID $? 最后运行的命令的结束代码(返 ...

  3. kafka配额控制

    转载请注明地址http://www.cnblogs.com/dongxiao-yang/p/5217754.html Starting in 0.9, the Kafka cluster has th ...

  4. Swift基本语法学习笔记

    Swift与OC的不同点 导入框架的方式 OC使用#import \<UIKit/UIKit.h> Swift使用import UIKit 定义标识符的方式 Swift中定义标识符,必须指 ...

  5. sql Server 发送邮件 错误类型及原因

    设置警报         在[常规项]中做以下设置 新建警报 设置警报名称 选择数据库 选择严重性     在[响应项]中可以做以下设置 选择要邮件通知的操作员 可以设置执行一个警报作业    在选项 ...

  6. 用ChooseALicense帮自己选一个开源license,然后用AddALicense给自己的github自动加上license文件

    在我之前的一篇博客里面介绍过tl;drLegal ——开源软件license的搜索引擎,可以很方便的查询各种license,并且给出了很简洁的解释.今天又发现了另外一个帮助你选择你的开源软件licen ...

  7. Ubuntu 命令行下快速打开各类文件 分类: ubuntu shell 2014-11-18 20:06 210人阅读 评论(0) 收藏

    xdg-open 命令可以用来在Ubuntu下快速打开各类文件. 下面是从 manual 文档里截取的内容: 可以知道,该命令的功能是在图形界面下按照用户的平时习惯打开各类文件,甚至是链接. 这样,我 ...

  8. Qt 学习之路:Qt 简介

    Qt 是一个著名的 C++ 应用程序框架.你并不能说它只是一个 GUI 库,因为 Qt 十分庞大,并不仅仅是 GUI 组件.使用 Qt,在一定程度上你获得的是一个“一站式”的解决方案:不再需要研究 S ...

  9. 编写android的widget

    以前对这个东西很感兴趣,因为确实方便,如今有时间了来做一个例子 首先要定义一个layout(widgetview.xml)和一个配置文件(widgetconfig.xml) <?xml vers ...

  10. 一致性哈希(Consistent Hash)

    http://blog.csdn.net/cywosp/article/details/23397179/ http://www.codeproject.com/Articles/56138/Cons ...