FileReader上传图片

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

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

时间： 2024-08-28 01:22:15

FileReader上传图片的相关文章

html5使用FileReader上传图片

客户端代码是网上找的,修改为.net代码. <html><head>    <meta charset="utf-8">    <title>使用html5 FileReader获取图片,并异步上传到服务器(not iframe)</title>    <style type="text/css">        body        {            margin: 0px;    

fileReader 上传图片

1 function getImgSrc(target, callback) { 2 if (window.FileReader) { 3 var oPreviewImg = null, oFReader = new window.FileReader(); 4 oFReader.onload = function (oFREvent) { 5 oPreviewImg = new Image(); 6 var type = target.files[0].type.split("/")

New FileReader上传图片

function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp").change(functio

js上传图片&amp;预览（filereader）

fileReader HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } else { ale

JavaScript 中的FileReader对象（实现上传图片预览）

1.FileReader对象简介 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } else { alert("Not supported by your browser!"); } 调用FileReader对象的方法 FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取.下面的表格列出了这些方法以及他们的

上传图片显示本地链接——FileReader

参考网站 FileReader - Web API 接口 | MDN DEMO 简介 使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input type="text" />元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasEl

JS上传图片-通过FileReader获取图片的base64

下面文章,我想要的是: FileReader这个对象,可以借助FileReader来获取上传图片的base64,就可以在客户端显示该图片了.同时,还可以把该图片的base64发送到服务端,保存起来. 在XMLHttpRequest Level2出台之前,大多数的异步上传图片都是利用iframe去实现的. 至于具体的实现细节,我就不在这边啰嗦的,Google一下就有文章谈这个东西. 这次主要说说,怎么用新的API去实现图片上传. 原标题:JavaScript怎么上传图片 首先,少不了的自然是XML

通过 html5 FileReader 实现上传图片预览功能

Html 部分 <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title></title>     </head>     <body>         <input type="file" name="file" onchange="

通过FileReader预览上传图片

html:采用了layui框架样式,(可自己写): js如下: function getFileContent() { /*1.创建文件读取对象*/ var reader = new FileReader(); /*2.读取文件,获取DataURL*/ var file = document.querySelector("#imageUrl").files; reader.readAsDataURL(file[0]); /*获取数据*/ reader.onload = function