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("/")[1];
 7             var src = oFREvent.target.result;
 8             oPreviewImg.src = src;
 9
10             if (typeof callback == "function") {
11                 callback(oPreviewImg, target, type, src);
12             }
13
14             return oPreviewImg.src;
15         };
16
17         return (function () {
18             var aFiles = target.files;
19             if (aFiles.length === 0) {
20                 return;
21             }
22             if (!IsImgType(aFiles[0].type)) {
23                 alert("You must select a valid image file!");
24                 return;
25             }
26
27             if (aFiles[0].size > 1024 * 1024) {
28                 target.value = "";
29                 alert(‘Please upload image file size less than 1M.‘);
30                 return;
31             }
32
33             oFReader.readAsDataURL(aFiles[0]);
34         })();
35     }
36     if (navigator.appName === "Microsoft Internet Explorer") {
37         return (function () {
38             document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = target.value;
39         })();
40     }
41 }
时间: 2024-11-09 04:44:40

fileReader 上传图片的相关文章

html5使用FileReader上传图片

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

FileReader上传图片

实现拖拽图片,在上传至服务器前,显示图片并操控大小 利用HTML5 dragenter dragover dragleave drop 在实现图片显示方面,用了FileReader这个类 var files=event.dataTransfer.files;//获取拖拽的图片集合 filereader.readAsDataURL(files[i]); 利用this.result <img src='"+this.result+"'/>显示图片到页面 若想获得图片大小,需要重

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