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

利用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. Ethernet & IEEE 802.3 802.X 802.1ag-MEP

    ISO/IEC 7498标准,它定义了网络互联的7层框架,也就是开放式系统互连参考模型(OSI模型). 交换机好比是邻近的街道,而路由器则是街道的交汇点. (交换机第二层,即数据链路层,也有四层,七层 ...

  2. poj 1106 Transmitters (枚举+叉积运用)

    题目链接:http://poj.org/problem?id=1106 算法思路:由于圆心和半径都确定,又是180度,这里枚举过一点的直径,求出这个直径的一个在圆上的端点,就可以用叉积的大于,等于,小 ...

  3. springMVC能做什么,做j2ee时候要考虑什么

    转载: http://jinnianshilongnian.iteye.com/category/231099 [置顶] 跟我学SpringMVC目录汇总贴.PDF下载.源码下载 博客分类: 跟开涛学 ...

  4. Android实现弹出输入法时,顶部固定,中间部分上移的效果

    前言 最近做项目时碰到一个问题,在意见反馈里面,提交按钮写到顶部,当用户输入反馈意见或者邮箱手机号时,弹出的输入法会上移整个页面,导致提交按钮显示不了. 很明显,这样的界面是非常不友好的,找了一些资料 ...

  5. [转]C++ map容器用法

    C++ map的基本操作和使用 原文地址:http://blog.sina.com.cn/s/blog_61533c9b0100fa7w.html Map是c++的一个标准容器,她提供了很好一对一的关 ...

  6. springmvc报错 org.springframework.web.servlet.DispatcherServlet

    在写springMVC时,导入所有需要的包后,运行程序,控制台报以下错误: 严重: Servlet [springDispatcherServlet] in web application [/Spr ...

  7. centos 6.5上部署jetty

    和tomcat是一样的,在部署容器之前,我们首先得有java环境 这里我们选择用rpm包的方式安装jdk 这里我们上传我之前下载好的jdk包 然后按照该文章http://blog.csdn.net/x ...

  8. c++文件流

    前言 文件流能够从文件系统中读取数据并向文件中写入数据. 文件输入流适用于读取配置数据.读取保存的文件以及批处理基于文件的数据等任务.Fprintf,fwrite,fputs 文件输出流适用于保存状态 ...

  9. MySQL基础 (DML)

    DML语句             DML操作是指对数据库中表记录的操作,主要包括表记录的插入(insert).更新(update).删除(delete)和查询(select) 1.插入记录 插入一条 ...

  10. OpenRisc-42-or1200的ALU模块分析

    引言 computer(计算机),顾名思义,就是用来compute(计算)的.计算机体系结构在上世纪五六十年代的时候,主要就是研究如何设计运算部件,就是想办法用最少的元器件(那时元器件很贵),最快的速 ...