html file 文件类型 赋值到img,File文件控件，选中文件(图片,flash,视频)即立即预览显示...

转载 于 2021-07-02 02:54:11 发布 · 697 阅读 · 0
文章标签：

#html file 文件类型 赋值到img

本文介绍了一种实现无刷新文件预览的方法，通过JavaScript和HTML，针对图片、Flash和视频文件进行预览。在选择文件后，不刷新页面即可显示预览，避免了file控件清空的问题。主要涉及的技术包括文件类型检查、DOM操作和弹窗预览。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我们平常用file文件控件上传文件，要预览有时会刷新页面，结果file控件被清空，好多人问能能让他不清空或重新赋值，因为处于安全性的考虑，这是不可能的。那怎么进行无刷新预览呢？这里我把我所使用的方法写一下。

选择页面：

function checkdata()

{

var filename=document.getelementbyid("fileup").value;

if(filename=="")

return;

//检查文件类型

var exname=filename.substr(filename.lastindexof(".")+1).touppercase()

if(exname=="jpg"||exname=="bmp"||exname=="gif")

{

//document.getelementbyid("myimg").src=filename;

document.getelementbyid("previewimage").innerhtml='%5C''+filename+'%5C'';

}

else

if(exname=="swf")

{

document.getelementbyid("previewimage").innerhtml='';

}

else

if(exname=="wmv"||exname=="mpeg"||exname=="asf"||exname=="avi")

{

var strcode='

strcode+=' autostart=\'1\' playcount=\'0\' enablecontextmenu=\'0\' type=\'application/x-mplayer2\'>

';

document.getelementbyid("previewimage").innerhtml=strcode;

}

else

{

alert("请选择正确的图片文件");

document.getelementbyid("fileup").value="";

}

}

function openwin()

{

window.open("addpreview.aspx","","height=300,width=345,top=100,left=100");

}

html代码：

runat="server" onchange="checkdata()">

注：这里可以是图片(jpg或gif格式),flash动画(swf)及视频文件(wmv,mpeg,asf,avi)。大小限定在1m以内。

当前页预览

弹出预览页面：

function getstr()

{

var strcode="";

var width=100;

var high=100;

if(self.opener.document.getelementbyid("fileup")!=null)

{

//strcode=self.opener.document.getelementbyid("previewimage").innerhtml;

width=self.opener.document.getelementbyid("lblwidth").innertext;

high=self.opener.document.getelementbyid("lblhigh").innertext;

var filename=self.opener.document.getelementbyid("fileup").value;

var exname=filename.substr(filename.lastindexof(".")+1).touppercase()

if(exname=="jpg"||exname=="bmp"||exname=="gif")

{

//document.getelementbyid("myimg").src=filename;

strcode='%5C''+filename+'%5C'';

}

else

if(exname=="swf")

{

strcode='';

}

else

if(exname=="wmv"||exname=="mpeg"||exname=="asf"||exname=="avi")

{

strcode='

strcode+=' autostart=\'1\' playcount=\'0\' enablecontextmenu=\'0\' type=\'application/x-mplayer2\'>

';

}

}

if(self.opener.document.getelementbyid("txtadcode")!=null)

{

strcode=self.opener.document.getelementbyid("txtadcode").innerhtml;

}

if(strcode!="")

{

//window.alert(filename);

document.getelementbyid("showimg").innerhtml=strcode;

}

}

显示：

html file 文件类型 赋值到img,基于jquery实现图片上传本地预览功能
weixin_31182871的博客
07-02 808
当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的，如果网速慢或图片有问题，这样不但浪费客户时间同时也浪费服务器资源了，下面我们介绍利用js上传图片时本地实现预览，希望此方法对各位有所帮助哦。一、原理分为两步：当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL)；把对象URL赋值给事先写好的img标签的src属性即可把图片显示出...
html选择文件夹控件,File文件控件，选中文件(图片,flash,视频)即立即预览显示
weixin_33925615的博客
06-04 2016
我们平常用file文件控件上传文件，要预览有时会刷新页面，结果file控件被清空，好多人问能能让他不清空或重新赋值，因为处于安全性的考虑，这是不可能的。那怎么进行无刷新预览呢？这里我把我所使用的方法写一下。选择页面：function checkData(){var fileName=document.getElementById("FileUp").value;if(fileName=="")re...
【转】html之file标签 --- 图片上传前预览 -- FileReader
weixin_30621959的博客
02-06 442
　　记得以前做网站时，曾经需要实现一个图片上传到服务器前，先预览的功能。当时用html的<input type="file"/>标签一直实现不了，最后舍弃了这个标签，使用了其他方式来实现了这个功能。 　　今天无意发现了一个知识点，用html的file标签就能实现图片上传前预览，感觉很棒，记录一下！就是通过file标签和js的FileReader接口，把选择的图片文件调用readA...
html选择文件夹控件,如何使用 FileOpenPicker 控件打开本地媒体文件 (HTML)
weixin_42510792的博客
06-04 584
如何使用 FileOpenPicker 控件打开本地媒体文件 (HTML)02/12/2016本文内容[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]使用 FileOpenPicker 播放用户计算机上的音频或视频文件，以访问并打开这些文件。说明在采用 Ja...
html 网页图片全屏预览 插件
07-29
html 网页图片全屏预览 插件 支出各种浏览器
vue.js 图片上传并预览及图片更换功能的实现代码
10-18
首先，HTML部分是整个功能的基础，包含了一个图片显示区域（`<img>`标签）和一个文件输入控件（`<input type="file">`）。例如： ```html <img :src="avatar" class="img-avatar"> <input type="file" name=...
JavaScript通过filereader接口读取文件
10-19
JavaScript通过FileReader接口读取文件的知识点主要涵盖了如何使用FileReader对象来读取本地文件系统中的文件，其中重点介绍了使用readAsDataURL方法来预览图片文件。这一过程涉及到前端开发中的文件操作与DOM操作，...
html5文件上传输入框样式代码.zip
07-05
例如，如果你想创建一个只能选择图片文件的上传输入框，可以这样写： ```html <input type="file" accept="image/*" class="custom-file-input"> ``` 在这个例子中，`accept="image/*"`确保用户只能选择图像文件。...
JavaScript实现HTML文件上传与本地预览功能
最常使用的是`readAsDataURL`方法，因为它能够直接获取图片文件的内容，并将其转换为一个data URL，适用于图像的直接显示。 3. 事件处理：需要监听`input[type="file"]`元素的`change`事件，当用户选择完文件后，该...
javascript 读取文本文件.rar
12-21
3. Blob URL：如果需要在页面上预览文件内容，可以将File对象转换为Blob URL，然后赋值给`<a>`或`<img>`标签的`href`或`src`属性。例如，用`URL.createObjectURL(file)`生成Blob URL。 4. HTML5 文件API：除了...
html文件选择
11-06
用一个列表显示指定文件夹下的所有文件，点击列表项可输出文件名。
JS实现文件夹选择.HTML
07-18
使用js实现文件夹选择功能，操作方便简单
html之file标签 --- 图片上传前预览 -- FileReader
小白菜，追逐吧，坚持吧！
03-17 665
1. 用html的file标签就能实现图片上传前预览，通过file标签和js的FileReader接口，把选择的图片文件调用readAsDataURL方法，把图片数据转成base64字符串形式显示在页面上。 实现代码： <div style="border:2px dashed red;"> <p> 图片上传前...
html页面点击图片名称查看图片------图片预览插件viewer.js使用
热门推荐
qq1164014750
08-09 3万+
前言  在做项目时，会遇到在前台展示附件详情，比如图片，word，pdf等。viewer.js 图片查看器，用来查看页面中的图片。 基本效果： Viewer.js的使用 这是一个github工程，功能很多。 使用可以参考： 参考：https://github.com/fengyuanchen/viewerjs#methods jQuery检查某个元素在页面上是否存在 https...
图片在线预览html,强大的jQuery图片查看器插件Viewer.js
weixin_29696451的博客
05-30 1013
插件描述：Viewer.js 是一款强大的图片查看器1、引入文件JS 版本：jQuery 版本：注意：JS 版本和 jQuery 版本名字虽然一样，但代码不一样，不能通用。2、HTML3、JavaScriptJS 版本：varviewer=newViewer(document.getElementById('jq22'));jQuery 版本：$('#jq22').viewer();配置名...
HTML5图像预览
qq_32089551的博客
07-04 1155
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片预览与查看原图</title> <style type="text/css"> body{ background: #f8f8f8;} #drag{ widt...
html点击浏览选择文件,html 点击a标签 弹出浏览文件
weixin_39953578的博客
06-03 405
img.html*{padding:0;margin:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;background-color:#000;}.mmd{width:900px;height:350px;margin:100px auto;position:relative;}.mmd .m_msg{width:355px;height...
图片预览小窗口html,jQuery和css3超酷图片预览插件
weixin_28917337的博客
06-05 482
这是一款使用css3和Velocity.js制作的jquery图片预览插件。电子商务网站设计的宗旨是通过简化的设计提高用户体验，提高转化率也有一定的模式。另外一种模式是在需要的地方提供更多的信息来达到同样的目的。这款jquery图片预览插件使用的就是第二种模式。这个插件的操作十分简单：点击quick view按钮触发模态窗口来显示大图和图片的信息。一个插件程序的设计理念是为用户提供最好的体验，有很...
HTML5开发之通过文件对象选择文件
ccnanxi的博客
11-14 2780
在HTML中新增了两个与表单相关的API——文件API与拖放API。拖放API可以实现一些有趣的功能，允许用户拖放选项并将其放置到浏览器中的任何地方。其很好地体现了HTML5作为web应用程序规范的思路，使得开发者可以从桌面计算机中借用更多功能。      在HTML5里，从Web网页上访问本地文件系统变得十分简单，那就是使用文件API。这个file规范里提供了一个API来表现Web应用里的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值