实现图片文件上传之后预览

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<input type="file" id="file" name="" />
<div id="image" style="width:390px;height:280px; background:#CCCCCC; float:left;">
<img src="__PUBLIC__/images/tu.png" />
</div>
</body>
<script>
document.getElementById(‘file‘).onchange = function() {
var imgFile = this.files[0];
var fr = new FileReader();
fr.onload = function() {
document.getElementById(‘image‘).getElementsByTagName(‘img‘)[0].src = fr.result;
};
fr.readAsDataURL(imgFile);
};
</script>

原文地址:https://www.cnblogs.com/hzb462606/p/8910111.html

时间: 2024-11-09 06:22:52

实现图片文件上传之后预览的相关文章

js的FileReader实现图片文件上传、预览

js的FileReader实现图片文件上传.预览 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料:而缺点便是,网页的大小可能会变大.它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用.您的图像文件不能够超过浏览器限定的大小,否则无法读取图像文件.1

JQ图片文件上传之前预览功能

1.先准备一个div onchange触发事件 <input  type="file" onchange="preview(this)" ></span> <div id="preview"></div> 2.写JS代码 //上传图片之前预览图片function preview(file){ if (file.files && file.files[0]){ var reader =

【转】文件上传前预览

网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #preview, .img, img { w

form表单系列中文件上传及预览

文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.join('static/img', fafafa.name) with open(img.path, 'wb') as f: for item in fafafa.chunks(): f.write(item) function iframeSubmit(){ $('#ifm1').load(functi

form里面文件上传并预览

其实form里面是不能嵌套form的,如果form里面有图片上传和其他input框,我们希望上传图片并预览图片,然后将其他input框填写完毕,再提交整个表单的话,有两种方式! 方式一:点击上传按钮的链接弹出上传页面,上传文件,上传完毕再返回表单页面:这种比较简单,其实就是表单页面的上传按钮仅仅是一个链接,仅用于打开上传文件的弹出页面: 方式二:就是表单里面有<input type="file" name="picture"/>,点击上传按钮后,会在上传

基于HTML5和JSP实现的图片Ajax上传和预览

本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHttprequest Level2中对二进制文件上传的支持(通过构建FormData对象进行支持)以及Servlet 3.0支持的Multiconfig注解来支持文件的上传.在Servlet 3.0 规范之前通常使用第三方库如commons-fileupload进行解决文件上传. HTML5 中的 File 对

ASP.NET MVC图片管理(上传,预览与显示)

先看看效果(下面gif动画制作有点大,5.71MB): 题外话:上面选择图片来源于Insus.NET的新浪微博:http://weibo.com/104325017 也是昨晚(2015-07-03)Insus.NET烹饪的晚餐.如果你也想学习烹饪,也可以关注Insus.NET的微博. 言归正传,由于以前的asp.net mvc的练习文件上传文件,显示或是下载等博文,均是存储于站点目录之中.这次练习是把图片存储于数据库.也就是以图片的数据流存储.在上传时我们需要把文件处理为数据库,显示时,我们需要

servlet实现文件上传,预览,下载和删除

CreateTime--2017年9月4日09:24:59 Author:Marydon 一.准备工作: 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数据转成JSON对象需要jar包:commons-beanutils-1.8.3.jar.commons-collections-3.2.1.jar.commons-lang-2.6.jar.commons-log

结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用,整合两者可以实现我们常规的Web数据导入操作,导入数据操作过程包括有上传文件,预览数据,选择并提交记录等一系列操作. 关于这个插件,我在早期随笔<Bootstrap文件上传插件File Input的使用>也做了一次介绍,这是一个增强的 HTML5 文件输入控件,是一个 Bootstrap 3.x