js 可增加删除图片上传框js代码

js 可增加删除图片上传框js代码
本款程序可以检测用户上传图片类型，大小，在上传之前，同时也可以增加多文件上传，就是不定文件多少，仿51空间那种文件上代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片预览效果</title>
<script src="CJL.0.1.min.js"></script>
<script src="QuickUpload.js"></script>
<script >

var ImagePreview = function(file, img, options) {
 
 this.file = $$(file);//文件对象
 this.img = $$(img);//预览图片对象
 
 this._preload = null;//预载图片对象
 this._data = "";//图像数据
 this._upload = null;//remote模式使用的上传文件对象
 
 var opt = this._setOptions(options);
 
 this.action = opt.action;
 this.timeout = opt.timeout;
 this.ratio = opt.ratio;
 this.maxWidth = opt.maxWidth;
 this.maxHeight = opt.maxHeight;
 
 this.onCheck = opt.onCheck;
 this.onShow = opt.onShow;
 this.onErr = opt.onErr;
 
 //设置数据获取程序
 this._getData = this._getDataFun(opt.mode);
 //设置预览显示程序
 this._show = opt.mode !== "filter" ? this._simpleShow : this._filterShow;
};
//根据浏览器获取模式
ImagePreview.MODE = $$B.ie7 || $$B.ie8 ? "filter" :
 $$B.firefox ? "domfile" :
 $$B.opera || $$B.chrome || $$B.safari ? "remote" : "simple";
//透明图片
ImagePreview.TRANSPARENT = $$B.ie7 || $$B.ie6 ?
 "mhtml:" + document.scripts[document.scripts.length - 1].getAttribute("src", 4) + "!blankImage" :
 "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";

ImagePreview.prototype = {
  //设置默认属性
  _setOptions: function(options) {
    this.options = {//默认值
  mode:  ImagePreview.MODE,//预览模式
  ratio:  0,//自定义比例
  maxWidth: 0,//缩略图宽度
  maxHeight: 0,//缩略图高度
  onCheck: function(){},//预览检测时执行
  onShow:  function(){},//预览图片时执行
  onErr:  function(){},//预览错误时执行
  //以下在remote模式时有效
  action:  undefined,//设置action
  timeout: 0//设置超时(0为不设置)
    };
    return $$.extend(this.options, options || {});
  },
  //开始预览
  preview: function() {
 if ( this.file && false !== this.onCheck() ) {
  this._preview( this._getData() );
 }
  },
 
  //根据mode返回数据获取程序
  _getDataFun: function(mode) {
 switch (mode) {
  case "filter" :
   return this._filterData;
  case "domfile" :
   return this._domfileData;
  case "remote" :
   return this._remoteData;
  case "simple" :
  default :
   return this._simpleData;
 }
  },
  //滤镜数据获取程序
  _filterData: function() {
 this.file.select();
 try{
  return document.selection.createRange().text;
 } finally { document.selection.empty(); }
  },
  //domfile数据获取程序
  _domfileData: function() {
 return this.file.files[0].getAsDataURL();
  },
  //远程数据获取程序
  _remoteData: function() {
 this._setUpload();
 this._upload && this._upload.upload();
  },
  //一般数据获取程序
  _simpleData: function() {
 return this.file.value;
  },
 
  //设置remote模式的上传文件对象
  _setUpload: function() {
 if ( !this._upload && this.action !== undefined && typeof QuickUpload === "function" ) {
  var oThis = this;
  this._upload = new QuickUpload(this.file, {
   onReady: function(){
    this.action = oThis.action; this.timeout = oThis.timeout;
    var parameter = this.parameter;
    parameter.ratio = oThis.ratio;
    parameter.width = oThis.maxWidth;
    parameter.height = oThis.maxHeight;
   },
   onFinish: function(iframe){
    try{
     oThis._preview( iframe.contentWindow.document.body.innerHTML );
    }catch(e){ oThis._error("remote error"); }
   },
   onTimeout: function(){ oThis._error("timeout error"); }
  });
 }
  },
 
  //预览程序
  _preview: function(data) {
 //空值或相同的值不执行显示
 if ( !!data && data !== this._data ) {
  this._data = data; this._show();
 }
  },
 
  //设置一般预载图片对象
  _simplePreload: function() {
 if ( !this._preload ) {
  var preload = this._preload = new Image(), oThis = this;
  preload.onload = function(){ oThis._imgShow( oThis._data, this.width, this.height ); };
  preload.onerror = function(){ oThis._error(); };
 }
  },
  //一般显示
  _simpleShow: function() {
 this._simplePreload();
 this._preload.src = this._data;
  },
 
  //设置滤镜预载图片对象
  _filterPreload: function() {
 if ( !this._preload ) {
  var preload = this._preload = document.createElement("div");
  //隐藏并设置滤镜
  $$D.setStyle( preload, {
   width: "1px", height: "1px",
   visibility: "hidden", position: "absolute", left: "-9999px", top: "-9999px",
   filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')"
  });
  //插入body
  var body = document.body; body.insertBefore( preload, body.childNodes[0] );
 }
  },
  //滤镜显示
  _filterShow: function() {
 this._filterPreload();
 var preload = this._preload,
  data = this._data.replace(/[)'"%]/g, function(s){ return escape(escape(s)); });
 try{
  preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
 }catch(e){ this._error("filter error"); return; }
 //设置滤镜并显示
 this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src="" + data + "")";
 this._imgShow( ImagePreview.TRANSPARENT, preload.offsetWidth, preload.offsetHeight );
  },
 
  //显示预览
  _imgShow: function(src, width, height) {
 var img = this.img, style = img.style,
  ratio = Math.max( 0, this.ratio ) || Math.min( 1,
    Math.max( 0, this.maxWidth ) / width  || 1,
    Math.max( 0, this.maxHeight ) / height || 1
   );
 //设置预览尺寸
 style.width = Math.round( width * ratio ) + "px";
 style.height = Math.round( height * ratio ) + "px";
 //设置src
 img.src = src;
 this.onShow();
  },
 
  //销毁程序
  dispose: function() {
 //销毁上传文件对象
 if ( this._upload ) {
  this._upload.dispose(); this._upload = null;
 }
 //销毁预载图片对象
 if ( this._preload ) {
  var preload = this._preload, parent = preload.parentNode;
  this._preload = preload.onload = preload.onerror = null;
  parent && parent.removeChild(preload);
 }
 //销毁相关对象
 this.file = this.img = null;
  },
  //出错
  _error: function(err) {
 this.onErr(err);
  }
}
</script>
</head>
<body>
<style>
.perview {width:600px;background:#fff;font-size:12px; border-collapse:collapse;}
.perview td, .perview th {padding:5px;border:1px solid #ccc;}
.perview th {background-color:#f0f0f0; height:20px;}
.perview a:link, .perview a:visited, .perview a:hover, .perview a:active {color:#00F;}
.perview table{ width:100%;border-collapse:collapse;}
</style>
<table border="0" class="perview">
 <tr>
   <th>选择文件</th>
   <th width="50%">预览图</th>
  </tr>
  <tr>
   <td height="200"><input id="idFile" name="pic" type="file" /></td>
   <td align="center"><img id="idImg" /></td>
  </tr>
 </tbody>
</table>
<script>

var ip = new ImagePreview( $$("idFile"), $$("idImg"), {
 maxWidth: 200, maxHeight: 200, action: "ImagePreview.ashx"
});
ip.img.src = ImagePreview.TRANSPARENT;
ip.file.onchange = function(){ ip.preview(); };

</script>
<br />
<style>
/*file样式*/
#idPicFile {
 width:80px;height:20px;overflow:hidden;position:relative;
 background:url(http://www.cnblogs.com/images/cnblogs_com/cloudgamer/169629/o_addfile.jpg) center no-repeat;
}
#idPicFile input {
 font-size:20px;cursor:pointer;
 position:absolute;right:0;bottom:0;
 filter:alpha(opacity=0);opacity:0;
 outline:none;hide-focus:expression(this.hideFocus=true);
}
</style>
<table class="perview">
 <tr>
  <th align="right"> 选择图片： </th>
  <td width="75%"> <div id="idPicFile"> </div> </td>
 </tr>
 <tr>
  <td colspan="2"><table>
    <thead>
     <tr>
      <th> 文件路径 </th>
      <th width="30%"> 预览图 </th>
      <th width="20%"> 操作 </th>
     </tr>
    </thead>
    <tbody id="idPicList">
     <tr>
      <td></td>
      <td align="center"></td>
      <td align="center"><a href="#">移除</a></td>
     </tr>
    </tbody>
   </table></td>
 </tr>
</table>
<script>

var table = $$("idPicList"), model = table.removeChild(table.rows[0]);

function AddPreview(){
 var file = document.createElement("input"),
  img = document.createElement("img"),
  ip = new ImagePreview( file, img, {
    maxWidth: 150,
    maxHeight: 100,
    action:  "ImagePreview.ashx",
    onErr:  function(){ alert("载入预览出错！"); ResetFile(file); },
    onCheck: CheckPreview,
    onShow:  ShowPreview
   });
 file.type = "file"; file.name = "pic";
 file.onchange = function(){ ip.preview(); };
 $$("idPicFile").appendChild(file);
}

//检测程序
var exts = "jpg|gif|bmp", paths = "|";
function CheckPreview(){
 var value = this.file.value, check = true;
 if ( !value ) {
  check = false; alert("请先选择文件！");
 } else if ( !RegExp( ".(?:" + exts + ")$$", "i" ).test(value) ) {
  check = false; alert("只能上传以下类型：" + exts);
 } else if ( paths.indexOf( "|" + value + "|" ) >= 0 ) {
  check = false; alert("已经有相同文件！");
 }
 check || ResetFile(this.file);
 return check;
}

//显示预览
function ShowPreview(){
 var row = table.appendChild(model.cloneNode(true)),
  file = this.file, value = file.value, oThis = this;
 
 row.appendChild(file).style.display = "none";
 row.cells[0].innerHTML = value;
 row.cells[1].appendChild(this.img);
 
 row.getElementsByTagName("a")[0].onclick = function(){
  oThis.dispose(); table.removeChild(row);
  paths = paths.replace(value, ""); return false;
 };
 
 paths += value + "|";
 AddPreview();
}

AddPreview();

function ResetFile(file){
 file.value = "";//ff chrome safari
 if ( file.value ) {
  if ( $$B.ie ) {//ie
   with(file.parentNode.insertBefore(document.createElement('form'), file)){
    appendChild(file); reset(); removeNode(false);
   }
  } else {//opera
   file.type = "text"; file.type = "file";
  }
 }
}

</script>
</body>
</html>

时间： 2025-01-23 08:52:29

js 可增加删除图片上传框js代码的相关文章

简单实现node.js图片上传_node.js

本文实例为大家分享了node.js图片上传的具体代码,供大家参考,具体内容如下 1.node-formidable 对文件上传提供帮助的组件 2.app.js var formidable = require('formidable'); var http = require( 'http' ); var sys = require('sys'); http.createServer(function( request ,response ){ if( request.url == '/uplo

Js判断多个图片上传是否为空并且是否jpg格式

Js判断多个图片上传是否为空并且是否jpg格式 <script language="网页特效"> <!-- function fileLast(filename){ <!-- #得到文件后缀-->        str=filename;        strs=str.toLowerCase();         lens=strs.length;     return  extname=strs.substring(lens-4,lens); func

php中实现图片上传的实例代码

  以下是PHP中实现图片上传的实例代码,第一页是表单页upfiles_frm.php. 代码 标题: 上传文件: 第二页是处理表单页upfiles_add.php 代码 1 2 $mkdir_file_dir = mkdir('./img/'.$_POST['title'],0777); //上传文件的时候就开始创建一个图片相关的目录 3 $tmp_file_name = $_FILES['file']['tmp_name']; //上传成功之后取的临时文件名 4 $file_name = $

PHP之图片上传类实例代码(加了缩略图)

有缩略图功能 但是 感觉不全面,而且有点问题,继续学习,将来以后修改下 <form action="<?php $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data" method="post" ><input type="text" name="name" /><input type="file&q

全面解析node 表单的图片上传_node.js

node 全面解析表单的图片上传 ,multiparty解析与内容类型的HTTP请求multipart/form-data,也被称为文件上传. multiparty安装 npm install multiparty html代码 <form action="/api/uppic" method="post" > <input type="file" name="pic" > <input type

多图片上传的php代码

提供一个基础教程了,告诉你如果利用move_uploaded_file函数来实现多图片上传了,当然也可以实现多文件上传操作了,希望对你有帮助. <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <head> <title>多文件上传</title> </head> <body> <

php实现base64图片上传方式实例代码

本例子中没有采用File Post上传文件方式!原理一样,为了更加的理解base64 选择将其输出在文本域中,并提交至服务器!运用到项目中建议采用提交File方式. html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

asp.net多图片上传实现程序代码_实用技巧

前台代码如下: 复制代码 代码如下: <% @ Page Language="C#" CodeFile="UploadImg.aspx.cs" Inherits="NetAdmin_APicture_UploadImg" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

javascript图片上传预览代码 兼容主浏览器

在上传图片前预览图片的功能,可提高你网站的用户体验,让用户清楚所要上传的图片是不是选对了.本代码无JS插件,纯JavaScript结合HTML来实现,是一个很不错的例子,比较完整: 例子1  代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &