上传图片本地预览

最新推荐文章于 2023-12-29 10:31:28 发布
最新推荐文章于 2023-12-29 10:31:28 发布
阅读量118 收藏
点赞数
分类专栏： web前端技术 文章标签： JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/foyoto/article/details/84423799
版权
<html>
<head>
<title>a test for selection object</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type='text/javascript'>
$(function(){
$("#addImage").click(function() {
if($("ul#files li").size() < 6){
$("<li><input type='file' accept='image/bmp,image/png,image/gif,image/jpeg' value='' name='upload' οnchange='previewImage(this)'> (图片格式：*.bmp,*.png,*.gif,*.jpeg)<input type='button' value='删除' οnclick='removeItem(this)'/><div class='preview'></div></li>").appendTo("#files");
} else {
alert("添加图片数量不能超过6个");
}
});
});

function removeItem(obj) {
$(obj).parent("li").remove();
};

function previewImage(file)
{
var MAXWIDTH = 200;
var MAXHEIGHT = 200;
var div = file.parentNode.childNodes[3];

if (file.files && file.files[0])
{
div.innerHTML = '<img class=imghead>';
var img = div.getElementsByTagName('img')[0];
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;
var i = 0;
div.innerHTML = "<img id=imghead>";
i = i + 1;
//div.innerHTML = '<img class=imghead>';
var img = div.getElementsByTagName('img')[0];
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;

//TODO临时解决
var rect = {top:44, left:0, width:200, height:113};
status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div.innerHTML = "<div class='divhead' style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";

//var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
//status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
//div.innerHTML = "<div class='divhead' "+200+"px;height:"+200+"px;margin-top:"+200+"px;margin-left:"+200+"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;
}
</script>
</head>
<body>
<form>
<ul id="files">
<li><input type="file" οnchange="previewImage(this)" class="input-file" id="ss" accept="image/bmp,image/png,image/gif,image/jpeg" value="" name="upload"> (图片格式：*.bmp,*.png,*.gif,*.jpeg)<label class="error"></label><div class="preview" id="preview"></div></li>
</ul>
<input id="addImage" type="button" value="继续添加" />
</form>
</body>
</html>

备注：
IE下会有问题
foyoto
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js上传图片预览
weixin_30861797的博客
09-03 57
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> ...
js实现图片上传本地预览
weixin_30652491的博客
07-16 372
演示地址：https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> &lt...
图片上传时,本地显示预览功能
老紫竹的专栏
09-29 1883
问的人很多，我就把最简单给大家。script type="text/javascript">function showImg(){  document.getElementById("IMG").src=document.getElementById("photo").value;}script>img src="" id="IMG" />input type="file" name="photo
图片上传在本地显示
qq_52440306的博客
06-16 306
如何上传图片在本地显示， 1，给input元素 type设置为file类型 <img :src='burl' @change="chan" ref='file'> 2，添加改变事件，通过改变事件触发函数，在函数里new一个文件阅读器， let reader=new FileReader();//文件阅读器; 3，获取inupt节点，获取files属性,files属性里保存了图片信息； let file=this.$refs.file; if(file.files[0].type.in
图片上传本地预览
blueswen的博客
11-10 237
createObjectURL // 取得文件路径 function getFileURL(file) { var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined)
jQuery实现的上传图片本地预览效果简单示例
10-18
主要介绍了jQuery实现的上传图片本地预览效果,结合实例形式分析了jQuery上传图片本地预览所涉及的相关页面元素属性动态操作实现技巧,需要的朋友可以参考下
jQuery实现本地预览上传图片功能
10-23
在本文中，我们将深入探讨如何使用jQuery来实现本地预览上传图片的功能，这对于网页上的图像交互体验至关重要。jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。在这个功能中...
jquery实现图片上传前本地预览功能
10-22
在网页开发中，图片上传是常见的用户交互功能，而为了提供更好的用户体验，本地预览功能变得至关重要。在jQuery中，我们可以实现这一功能，让用户在实际上传之前就能看到所选图片的效果。以下是如何使用jQuery实现...
jquery实现图片上传前本地预览
10-19
主要为大家详细介绍了jquery实现图片上传前本地预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
上传图片在本地预览
欢迎来到我的博客
06-06 255
&lt;input type="file" id='uploadImg'&gt; &lt;img src="" alt="" class="imgShow"&gt; $('#uploadImg').on('change',function(){ var file = $(this) var fileObj = file[0]; //获取当前元
本地图片上传及预览
small_cutey的博客
03-18 1060
以下采用原生的方式上传图片，如有更高需求，可以采用lrz插件本地上传压缩图片，具体可参考以下路径 http://www.jq22.com/jquery-info3419（感谢） &lt;body&gt; &lt;div&gt; &lt;input type="file" name="file" class="form-control" id="zx_img" style="p
本地上传图片并实现可预览
Eternal_Summer
04-10 287
本地上传图片并实现可预览 1. 前台文件上传控件 <el-form-item label="上传图片"> <el-upload class="avatar-uploader" action="/setmeal/upload.do" :auto-upload="autoUpload" name="imgFile" :show-file-list="false" :on-success="h
关于上传图片本地预览方案
皮蛋很白的博客
01-07 338
方案一：结合服务端实现 将用户所选的图片上传到服务器 服务器接收上传的文件保存到服务器并返回服务器上的图片访问地址（http://example.com/a.jpg） 客户端将 img 的 src 设置为收到的图片地址 优点：兼容性好 缺点：麻烦 方案二：纯客户端实现 有两种 HTML5 增加的 API： 使用 URL.createObjectURL() 创建一个 DOMString，返回一个表示传递的参数对象的 URL，例如：blob:null/88a6a6a6-9858-4bfe-81ed
js文件上传图片并支持本地预览
最新发布
qq_41812656的博客
12-29 511
js实现上传图片支持本地预览
js实现本地上传图片及预览
日常笔记/总结/系列知识梳理
08-23 3216
【代码】js实现本地上传图片及预览。
HTML点击上传本地图片到页面 并在页面上显示上传的图片 以及遇到的问题
努力的小白马
04-13 9054
<div class="col-md-5"> <img id="img-avatar" src="../images/index/user.jpg" class="img-responsive" alt="无法显示默认头像" /> </div> <div class="col-md-offset-2 col-md-4"> <input id="chooseImage" type="file" name="file" accept="image/*.
图片上传时实现本地预览功能的原理解析
积少成多
02-08 4761
欢迎访问我的个人博客 http://xiaolongwu.cn/ 前言 最近在项目上加一个图片裁剪上传的功能，用的是cropper插件，注意到选择本地图片后就会有预览效果，这里整理一下这种预览效果的实现原理； 实现原理 通过input的 type = file属性和window的内置FileReader对象，利用FileReader对象的readAsDataURL方法，把图片数据转成b...
vue element upload实现图片本地预览
09-08
使用vue element upload组件实现图片本地预览，首先需要使用el-upload组件来实现文件上传功能。在el-upload标签中，需要定义以下属性： - action：上传文件的地址； - list-type：设置为"picture-card"，以卡片形式展示上传的图片； - on-preview：设置一个方法，用于点击预览图片。 然后，在methods中定义onPreview方法： ``` onPreview(file) { const reader = new FileReader(); reader.onload = (e) => { this.previewImage = e.target.result; this.previewVisible = true; }; reader.readAsDataURL(file.raw); }, ``` 在data中定义预览图片的相关数据： ``` data() { return { previewVisible: false, // 控制预览对话框显示或隐藏 previewImage: '' // 预览图片的地址 } }, ``` 在template中，使用el-dialog组件来实现图片预览的对话框： ``` <el-dialog :visible="previewVisible" :close-on-click-modal="true" @close="previewVisible = false" > <img :src="previewImage" style="width: 100%" alt="图片预览"> </el-dialog> ``` 最后，在el-upload中绑定on-preview方法： ``` <el-upload :action="uploadUrl" list-type="picture-card" @on-preview="onPreview" > <i class="el-icon-plus"></i> </el-upload> ``` 以上就是使用vue element upload实现图片本地预览的代码。当用户选择一张图片后，点击图片会弹出预览对话框，显示选中的图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值