js图片上传前预览功能,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: 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="'%20+%20evt.target.result%20+%20'" />';
      }
      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>
<div class="yanzRight">
 <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)" type="file"/>

</div>
 <div id="preview5" style="margin-left:150px;clear:both; padding-top:15px;">
 <img src="" alt="图片 1" id="imghead5" height="200" width="200" style="display:none;"/>
</div>
$scope.postData = { 
 dealerId: $scope.dealer.dealerId, 
 companyName: $scope.dealer.companyName, 
 companySize: $scope.dealer.companySize, 
 idCardFace: angular.element(document.querySelector(".idCardFace"))[0].src, 
 idCardBack: angular.element(document.querySelector(".idCardBack"))[0].src 
}; 
$http.post('updateDealerCertificate',$scope.postData).success(function(data){ 
<!-- 成功执行代码 --> 
}); 

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

html代码:

您可能感兴趣的文章:

  • Javascript图片上传前的本地预览实例
  • js图片上传前预览功能(兼容所有浏览器)
  • 图片上传之前检查大小、尺寸、格式并预览的js代码
  • js实现图片上传预览原理分析
  • Vue.js 2.0
    移动端拍照压缩图片上传预览功能
  • js前端实现多图图片上传预览的两个方法(推荐)
  • 兼容IE和FF的图片上传前预览js代码
  • javascript
    图片上传预览-兼容标准
  • js实现前端图片上传即时预览功能
  • js实现图片上传并预览功能

网上找到的一份文件上传前预览的代码,转自JavaScript
图片的上传前预览(兼容所有浏览器) 

您可能感兴趣的文章:

  • Javascript图片上传前的本地预览实例
  • js图片上传前预览功能(兼容所有浏览器)
  • 图片上传之前检查大小、尺寸、格式并预览的js代码
  • js实现图片上传预览原理分析
  • Vue.js 2.0
    移动端拍照压缩图片上传预览功能
  • 兼容IE和FF的图片上传前预览js代码
  • javascript
    图片上传预览-兼容标准
  • angularjs实现多张图片上传并预览功能
  • js实现前端图片上传即时预览功能
  • js实现图片上传并预览功能

预览如下:

您可能感兴趣的文章:

  • Javascript图片上传前的本地预览实例
  • 图片上传之前检查大小、尺寸、格式并预览的js代码
  • js实现图片上传预览原理分析
  • Vue.js 2.0
    移动端拍照压缩图片上传预览功能
  • js前端实现多图图片上传预览的两个方法(推荐)
  • 兼容IE和FF的图片上传前预览js代码
  • javascript
    图片上传预览-兼容标准
  • angularjs实现多张图片上传并预览功能
  • js实现前端图片上传即时预览功能
  • 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">
 //下面用于多图片上传预览功能
 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; i++) {   

   dd.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>";
   var imgObjPreview = document.getElementById("img"+i); 
   if (docObj.files && docObj.files[i]) {
    //火狐下,直接设img属性
    imgObjPreview.style.display = 'block';
    imgObjPreview.style.width = '150px';
    imgObjPreview.style.height = '180px';
    //imgObjPreview.src = docObj.files[0].getAsDataURL();
    //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
    imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
   }
   else {
    //IE下,使用滤镜
    docObj.select();
    var imgSrc = document.selection.createRange().text;
    alert(imgSrc)
    var localImagId = document.getElementById("img" + i);
    //必须设置初始大小
    localImagId.style.width = "150px";
    localImagId.style.height = "180px";
    //图片异常的捕捉,防止用户修改后缀来伪造图片
    try {
     localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
     localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
    }
    catch (e) {
     alert("您上传的图片格式不正确,请重新选择!");
     return false;
    }
    imgObjPreview.style.display = 'none';
    document.selection.empty();
   }
  } 

  return true;
 }

</script>
</head>

<body>
<div style="margin :0px auto; width:990px;">
<input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="javascript:setImagePreviews();" accept="image/*" />
<div id="dd" style=" width:990px;"></div>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

实现要点 
● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。 
● 对于 IE6~9 使用滤镜
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。
测试了一下IE8+都没有问题。但是IE7下file.value被浏览器去掉了文件路径分割线从而显示不出来 

一、将图片转成icon码的实现方式

图片 2

//图片预览功能
function previewImage(file,imgNum)
{
 var MAXWIDTH = 200; 
 var MAXHEIGHT = 200;
 var div = document.getElementById('preview'+imgNum);
 if (file.files && file.files[0])
 {
  div.innerHTML ='<img id=imghead'+imgNum+'>';
  var img = document.getElementById('imghead'+imgNum+'');
  img.onload = function(){
  var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
  img.width = rect.width;
  img.height = rect.height;
//   img.style.marginLeft = rect.left+'px';
  img.style.marginTop = rect.top+'px';
  }
  var reader = new FileReader();
  reader.onload = function(evt){img.src = evt.target.result;}
  reader.readAsDataURL(file.files[0]);
 }
 else //
 {
 var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
 file.select();
 var src = document.selection.createRange().text;
 div.innerHTML = '<img id=imghead'+imgNum+'>';
 var img = document.getElementById('imghead2');
 img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
 var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
 status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
 div.innerHTML = "<div id=divhead"+imgNum+" style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
 }
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
 var param = {top:0, left:0, width:width, height:height};
 if( width>maxWidth || height>maxHeight )
 {
  rateWidth = width / maxWidth;
  rateHeight = height / maxHeight;

  if( rateWidth > rateHeight )
  {
   param.width = maxWidth;
   param.height = Math.round(height / rateWidth);
  }else
  {
   param.width = Math.round(width / rateHeight);
   param.height = maxHeight;
  }
 }
 param.left = Math.round((maxWidth - param.width) / 2);
 param.top = Math.round((maxHeight - param.height) / 2);
 return param;
}

html关键代码

以上这篇js前端实现多图图片上传预览的两个方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

/* 
 * 多图片上传及预览指令(需指定图片类名) 
 * 
 */ 

angular.module('routerModule').directive('fileModel', ['$parse', 'fileReader', function($parse, fileReader) { 
 return { 
 restrict:'A', 
  link:function(scope, element, attrs, ngModel) { 
  var model = $parse(attrs.fileModel); 
  var modelSetter = model.assign; 
  var imgviewID = attrs["imgViewId"]; 
  var imgView = angular.element(document.querySelector("."+imgviewID)); 
  element.bind('change', function(event) { 
  scope.$apply(function() { 
   modelSetter(scope, element[0].files[0]); 
  }); 
  //附件预览 
  scope.file = (event.srcElement || event.target).files[0]; 
  fileReader.readAsDataUrl(scope.file, scope).then(function(result) { 
   imgView.attr("src",result); 
  }); 
  }); 
 } 
 } 
}]); 

angular.module('routerModule').factory('fileReader', ["$q", "$log", function($q, $log) { 
 var onLoad = function(reader, deferred, scope) { 
 return function() { 
  scope.$apply(function() { 
  deferred.resolve(reader.result); 
  }); 
 } 
 } 

 var onError = function(reader, deferred, scope) { 
 return function() { 
  scope.$apply(function() { 
  deferred.reject(reader.result); 
  }); 
 }; 
 }; 

 var getReader = function(deferred, scope) { 
 var reader = new FileReader(); 
 reader.onload = onLoad(reader, deferred, scope); 
 reader.onerror = onError(reader, deferred, scope); 
 return reader; 
 }; 

 var readAsDataURL = function(file, scope) { 
 var deferred = $q.defer(); 
 var reader = getReader(deferred, scope); 
 reader.readAsDataURL(file); 
 return deferred.promise; 
 } 
 return { 
 readAsDataUrl: readAsDataURL 
 }; 
 } 
]); 

js代码

<section class="infogroup"> 
 <h4>法人证件</h4> 
 <div class="row relatedCard"> 
 <div class="col-md-4 txtcenter"> 
  <p>身份证正面</p> 
  <div><img ng-src="showImg/{{dealer.idCardFace}}" class="idCardFace" enlarge-pic/></div> 
  <i class="fa fa-edit"></i> 点击编辑 
   <input type="file" file-model="idCardFace" img-view-id="idCardFace" /> 

 </div> 
 <div class="col-md-4 txtcenter"> 
  <p>身份证反面</p> 
  <div><img ng-src="showImg/{{dealer.idCardBack}}" class="idCardBack" enlarge-pic/></div> 
  <i class="fa fa-edit"></i> 点击编辑 
   <input type="file" file-model="idCardBack" img-view-id="idCardBack" /> 

 </div>     
 </div> 
</section> 

二、使用js的另一种方法一次选中多个图片预览展示

directive.js

controller.js中发送到后台的数据

本文实例为大家分享了angularjs上传多张图片并预览的具体代码,供大家参考,具体内容如下