这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 js 前端实现多图图片上传预览的两个方法 (推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
一、将图片转成 icon 码的实现方式
html 代码:
- <div class="yanzRight">
- <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)"
- type="file" />
- <span class="dui" id="imgOrder_dui" style="display: none;">
- </span>
- </div>
- <div id="preview5" style="margin-left:150px;clear:both; padding-top:15px;">
- <img src="" alt="" id="imghead5" height="200" width="200" style="display:none;"
- />
- </div>
js 代码
- //图片预览功能
- 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;
- }
二、使用 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>
以上这篇 js 前端实现多图图片上传预览的两个方法 (推荐) 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0521/330410.html