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(function(){
	var that=this;
	 readURL(that);
});

  

<a href="javascript:;" class="b-upload">
		<span class="sub">上传名片</span>
		<input type=‘file‘ name=‘paymentQrCode‘ id="imgInp" />
	</a>

  

.b-upload{
		    height: 40px;
		    line-height: 40px;
		    font-size: 18px;
		    width: 80%;
		    position: relative;
		    cursor: pointer;
		    color: #fff;
		    background: #008ce6;
		    border: 1px solid #ddd;
		    border-radius: 4px;
		    overflow: hidden;
		    text-align: center;
		    display: inline-block;
		    margin-top: 20px;
		}
		.b-upload input{
			position: absolute;
		    font-size: 160px;
		    right: 0;
		    top: 0;
		}

  

时间: 2024-11-09 09:47:12

New 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("/")

FileReader上传图片

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

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