js+html 实现图片上传预览

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>上传照片</title><style type="text/css">#tabkePhoto{display:none;}.photo{}.imgBox{width:200px;height:200px;}</style><!--[if lte IE 7]><style type="text/css">#tabkePhoto{display:block;}</style><![endif]--><!--[if lte IE 8]><style type="text/css">#tabkePhoto{display:block;}</style><![endif]--><!--[if lte IE 9]><style type="text/css">#tabkePhoto{display:block;}</style><![endif]--><script type="text/javascript" src="../jquery-1.11.3/jquery.min.js"></script></head><body><label class="photo" for="tabkePhoto">点击上传</label><input id="tabkePhoto" type=‘file‘><div class="imgBox"></div><script type="text/javascript">$(function(){$(‘#tabkePhoto‘).change(function(e){var _suffix = $(this).val().substr(Number($(this).val().indexOf(‘.‘))+1).toUpperCase();if(this.files && this.files[0]){var _file = this.files[0], imgUrl = new FileReader();imgUrl.readAsDataURL(_file);imgUrl.onload = function(){if(!(_suffix ==‘JPG‘ || _suffix == ‘PNG‘|| _suffix == ‘JPEG‘|| _suffix==‘TIFF‘|| _suffix==‘BMP‘)){alert(‘骚年,格式好像不对吧!你换张试试‘);}else{var _html = ‘<img src="‘+this.result+‘">‘;$(‘.imgBox‘).html(_html);}}}else{$(this).select();var _src = document.selection.createRange().text;if(!(_suffix ==‘JPG‘ || _suffix == ‘PNG‘|| _suffix == ‘JPEG‘|| _suffix==‘TIFF‘|| _suffix==‘BMP‘)){alert(‘骚年,格式好像不对吧!你换张试试‘);}else{var _html = ‘<img src="‘+_src+‘">‘;$(‘.imgBox‘).html(_html);}}	})})</script></body></html>
时间: 2024-10-14 06:19:50

js+html 实现图片上传预览的相关文章

JS实现图片上传预览效果:方法一

<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) { //判断浏览器是否有FileReader接口 if(typeof FileReader =='undefined') { /*$("#images_show").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口

来之不易的js图片上传预览代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

js:s上次预览,上传图片预览,图片上传预览

<!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-

js前端实现多图图片上传预览

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> //下面用于

input file图片上传预览js实现

js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $file[0]; var windowURL = window.URL || window.webkitURL; var dataURL; var $img = $("#ImgPr"); if(fileObj && fileObj.files && fileObj.files[

移动端 js 实现图片上传 预览

方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> /

JavaScript 图片上传预览效果

图片上传预览是一种在图片上传之前对图片进行本地预览的技术.使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验.但随着浏览器安全性的提高,要实现图片上传预览也越来越困难.不过群众的智慧是无限的,网上已经有很多变通或先进的方法来实现.例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法.但在opera.safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览.在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享.上次写的简便无刷新文

多图片上传预览功能

//下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document.getElementById("doc"); var dd = document.getElementById("dd"); dd.innerHTML = ""; var fileList = docObj.files; for (var i = 0; i < fileList.length;

移动端图片上传预览

前天要做wap版的图片上传预览,找了好半天才找到比较适合的插件,我在该插件的基础上修改了一些东西,比如:上传后的图片删除后不能再添加.不能限制上传图片的数量. input虽然有multiple(多选),但是android目前是不支持的. 该插件控制不了不能上传同一张图片,暂时没有思路解决这个问题(:′д`)ゞ 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 4 <head> 5 <meta charset=&