预览上传图片

转自:http://canglang0.iteye.com/blog/1662268<%@ page contentType="text/html;charset=UTF-8"%>
<html>
 <head>
  <title>图片上传预览</title>
  <script>
   function PreviewImage(imgFile)
   {
    var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
    if(!pattern.test(imgFile.value))
    {
     alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片!");
     imgFile.focus();
    }
    else
    {
     var path;
     if(document.all)//IE
     {
      imgFile.select();
      path = document.selection.createRange().text;
      document.getElementById("imgPreview").innerHTML="";
      document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=‘true‘,sizingMethod=‘scale‘,src=\"" + path + "\")";//使用滤镜效果
     }
     else//FF
     {
      path = URL.createObjectURL(imgFile.files[0]);
      document.getElementById("imgPreview").innerHTML = "<img src=‘"+path+"‘/>";
     }
    }
   }
  </script>
 </head>
 <body>
  <center>
   <input type="file" onchange=‘PreviewImage(this)‘ />
   <div id="imgPreview" style=‘width:500px; height:400px;‘>
    <img src=""/>
   </div>
  </center>
 </body>
</html>
时间: 2024-10-03 22:39:58

预览上传图片的相关文章

input预览上传图片

html代码 <input type="file" name="file" id="file" > <img src="" id="img"> js代码 $("#file").bind("change",function(){ var url = null; if(window.createObjectURL != undefined) { u

通过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

js预览上传图片

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

本地上传图片预览

<!DOCTYPE html > <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片上传本地预览,获得图片的base64(可压缩)</title> <style type="text/css"> .upload_image {

jquery实现上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture(){     var file = $('file_c').value;     if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){            alert("图片类型必须是.gif,jpeg,jpg,png中的一种")        }else{      $('both_form')

3种上传图片并实现预览的方法

在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 1 <!DOCTYPE html> 2 <ht

JavaScript实现简单的前端上传图片预览

JavaScript实现简单的前端上传图片预览 <div class="file_upload"> <div id="portrait"></div> <input type="file" name="" id="" onchange="showPerview(this)"> </div> <script type=&qu

HTML页面上传图片预览功能,一次上传多张图片

近期在项目中遇到一个问题,需要在上传图片时可以在本地预览,但是传统的'<input type="file">'并不支持.这里可以借用uploadPreview.js 实现 /*这部分内容非本人原创,完全来自网络,感谢原创作者的分享*/ jQuery.fn.extend({     uploadPreview: function (opts) {         var _self = this,             _this = $(this);         op

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