上传图片进行预览

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />    <style type="text/css">        #preview, .img, img        {            width:200px;            height:200px;        }        #preview        {            border:1px solid #000;        }    </style></head><body><div id="preview"></div><input type="file" onchange="preview(this)" /><script type="text/javascript">    function preview(file)    {        var prevDiv = document.getElementById(‘preview‘);        if (file.files && file.files[0])        {            var reader = new FileReader();            reader.onload = function(evt){                prevDiv.innerHTML = ‘<img src="‘ + evt.target.result + ‘" />‘;            }            reader.readAsDataURL(file.files[0]);        }        else        {            prevDiv.innerHTML = ‘<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\‘‘ + file.value + ‘\‘"></div>‘;        }    }</script></body></html>

时间： 2024-12-08 11:27:47

上传图片进行预览的相关文章

java uploadify上传图片并预览

前一篇文章可以看到对jquery uploadify的属性的讲解,这里给出具体的java代码实现,代码基于servlet,实现了上传图片并预览的效果,不多说,上代码 index.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W

Uploadify v3.2.1 上传图片并预览

前端JSP: <script type="text/javascript"> $(function() { $("#upload_org_code").uploadify({ 'height' : 27, 'width' : 80, 'buttonText' : '选择图片', 'swf' : '${pageContext.request.contextPath}/js/uploadify/uploadify.swf', 'uploader' : '${

上传图片带预览功能兼容IE和火狐等主流浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

2016/4/19 ①单个文件上传 ②上传图片后预览图片

1,f1.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>  <form action="f1chuli.php&q

js实现上传图片本地预览功能

js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * @param {Object} previewObj 上传图片的预览id元素 fresh-send-preview-img * @param {Object} localImg 预览图片的父层id元素 fresh-send-preview-imgvideo */ fs.setIma

Ajax 实现上传图片即时预览功能

本文为原创,转载请注明:http://www.pm-road.com/index.php/2014/07/31/50 很多网站在上传头像或照片的时候,都会有一个预览功能,结合自身体验将该功能实现一下:要求:图片保存到数据库点击查看实现ajax上传图片即时预览另一种方法(简单方法) 之前,我在做项目的时候,有一个功能就是要求上传的图片要即时显示,很多网站都会有这样的案例,其中的代码逻辑大多为把图片传到服务器上之后,返回图片的物理路径,不过,我们当时使用的框架为ExtJS 4.1,而且因为涉及一些

HTML5上传图片并预览

一个简易的实现: <!DOCTYPE html> <html> <head> <title>HTML5上传图片并预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery

Ajax 上传图片并预览

1. 直接上最简单的一种 ajax 异步上传图片,并预览 html: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>图片上传 | cookie</title> 6 </head> 7 <body

移动端h5实现拍照上传图片并预览

.移动端实现图片上传并预览,用到h5的input的file属性及filereader对象:经测除了android上不支持多图片上传,其他基本ok实用: 一:先说一下单张图片上传(先上代码): html结构(含多张图片容器div): 1 <div class="fileBtn"> 2 <p>点击添加图片</p> 3 <input id="fileBtn" type="file" onchange="

js上传图片并预览

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>By:DragonDean</title> <script type="t