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

利用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. Git服务器仓库的搭建和客户端使用方法

    环境说明: 1.fedora21  桌面系统  2.已经配置好yum仓库 一.安装git # yum install git 1.1 创建git用户 创建git账户并登录,直接指定用户目录到/home ...

  2. js判断input输入框为空时遇到的问题 弹窗后,光标没有定位到输入框,而是直接执行我的处理页面程序

    无论是会员注册还是提交订单,我们都要使用到form表单,此时我们在处理数据时,就要判断用户填写的信息.一次是直接通过js判断input输入框是否没有填信息,然后在后台处理文件中通过过滤字符串后再次判断 ...

  3. GWT(Google Web Tookit) Eclipse Plugin的zip下载地址(同时提供GWT Designer下载地址)

    按照Eclipse Help->Install new software->....(这里是官方安装文档:http://code.google.com/intl/zh-CN/eclipse ...

  4. visual studio 2015 企业版 序列号及官方下载地址

    VisualStudio 2015 正式版已经可以通过官方下载了. Visual Studio 是一套基于组件的软件开发工具和其他技术,可用于构建功能强大.性能出众的应用程序.Visual Studi ...

  5. delphi TFontDialog

      设置前先获得Memo的字体属性并设置给FontDialog 然后再设置MEMO的字体属性   //设置Memo的字体属性 procedure TForm1.mni_FontClick(Sender ...

  6. ajax jsonp跨域处理问题

    客户端 html $.ajax({ type : "get", async:false, dataType : "jsonp", jsonp: "js ...

  7. OOP—ECMAScript实现详解

    我们将从最基本的数据类型来分析,首先要了解的是ECMAScript用原始值( primitive values) 和对象 ( objects) 来区分实体, 因此有些文章里说的“在JavaScript ...

  8. Java基础知识强化09:String、StringBuffer和StringBuilder使用

    1. 对于三者使用的总结: (1).如果要操作少量的数据用 = String               (2).单线程操作字符串缓冲区下操作大量数据 = StringBuilder (3).多线程操 ...

  9. css考核点整理(十)-响应式开发经验,响应式页面的三种核心技术是什么

    响应式开发经验,响应式页面的三种核心技术是什么

  10. JavaScript 数据类型转换(显式与隐式)

    一.数据类型 JS中有5中简单数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number.String.还有一种复杂数据类型------Object,Object本质是 ...