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

利用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. Hardwood floor - SGU 131(状态压缩)

    题目大意:用 2*1 或者2*2-1的格子覆盖M*N的矩阵,有多少种覆盖方式. 分析:容易知道有以下6种放置方式. 然后用深搜的方法直接搞出来就行了,不过要使用两个变量来判断本位是否受影响.如果本行的 ...

  2. crontab使用--linux下的定时任务程序

    crontab是一个linux下的定时运行程序,如果我们想让自己的程序定时执行, 可以把自己的程序交给这个程序来完成 第一步:配置crontab的脚本的默认编辑器,它的默认的编辑器不好用,我们配置vi ...

  3. 提高效率 常用的几个xcode快捷键

    能用好快捷键,不仅仅可以提高工作效率,而且让你看起来更加的自信和能干,下面几个常用的快捷键,希望对你在工作中有帮助 1.首先说明一下几个标示的意思 Command  ⌘ Control      ⌃ ...

  4. json字符串、json对象、数组 三者之间的转换

    json字符串转化成json对象 // jquery的方法 var jsonObj = $.parseJSON(jsonStr) //js 的方法 var jsonObj = JSON.parse(j ...

  5. The Boost C++ Libraries

    " ...one of the most highly regarded and expertly designed C++ library projects in the world.&q ...

  6. Delphi中WebBrowser拦截网页Alert对话框消息(转)

    interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, O ...

  7. 经典SQL语句大全之基础

    一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname 3.说明:备份sql server--- 创建 ...

  8. 关于PHP定时执行任务的实现(转)

    PHP在这方面应该说是比较弱,如果只用php去实现可以如下: <?php ignore_user_abort();//关闭浏览器后,继续执行php代码 set_time_limit(0);//程 ...

  9. android 41 Environment

    assets通常存储音频视频文件,但不要太大. Environment可以获取sd卡的相关信息,sd卡的根路径:/storage/sdcard activity.java package com.sx ...

  10. GCC相关的环境变量

    介绍GCC在编译阶段和程序运行阶段用到的环境变量. GCC编译时用到的环境变量 GCC编译时用到的变量. C_INCLUDE_PATH GCC编译时查找头文件的目录列表.比如: echo $C_INC ...