用JS脚本实现本地和远程图片或声音文件预览

最新推荐文章于 2024-05-29 15:01:33 发布
最新推荐文章于 2024-05-29 15:01:33 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： JAVASCRIPT 文章标签： 脚本 border microsoft table function javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baby97/article/details/1040984
版权

<script language="javascript">
function divshow(){
 document.formSend.Flag.value="Send";
 document.all.divImg.innerHTML='';
 if (document.all.SendType.value == "远程地址"){
  document.all.divHttp.style.display='block';
  document.all.divFile.style.display='none';
 }
 else{
  document.all.divFile.style.display='block';
  document.all.divHttp.style.display='none';
 }
}
function View(){
 var Str;
 var furl='';
 if(document.formSend.SendType.value=="远程地址" && document.formSend.HAdd.value!=""){
  furl=document.formSend.HAdd.value;
  if (furl=="" || furl.indexOf(".") < 0){
   alert('您输入的网址不正确性。');
   return false;
  }
  if (furl.toLowerCase().indexOf("http://") < 0)
   furl="http://" + furl;
 }
 if(document.formSend.SendType.value=="上传文件" && document.formSend.UFile.value!="")
  furl=document.formSend.UFile.value;
 if (furl != ""){
  ext = furl.substring(furl.lastIndexOf(".")+1,furl.length);
  switch (ext.toLowerCase()){
   case "mid":
    Str='<object id="mplayer" width="120" height="45" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" ';
    Str=Str+'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" ';
    Str=Str+'align="baseline" border="0" standby="Loading Microsoft Windows Media Player components..." ';
    Str=Str+'type="application/x-oleobject">';
    Str=Str+'<param name="FileName" value="' + furl + '">';
    Str=Str+'<param name="ShowControls" value="1">';
    Str=Str+'<param name="ShowPositionControls" value="0">';
    Str=Str+'<param name="ShowAudioControls" value="0">';
    Str=Str+'<param name="ShowTracker" value="1">';
    Str=Str+'<param name="ShowDisplay" value="0">';
    Str=Str+'<param name="ShowStatusBar" value="0">';
    Str=Str+'<param name="AutoSize" value="0">';
    Str=Str+'<param name="ShowGotoBar" value="0">';
    Str=Str+'<param name="ShowCaptioning" value="0">';
    Str=Str+'<param name="AutoStart" value="1">';
    Str=Str+'<param name="PlayCount" value="0">';
    Str=Str+'<param name="AnimationAtStart" value="0">';
    Str=Str+'<param name="TransparentAtStart" value="0">';
    Str=Str+'<param name="AllowScan" value="0">';
    Str=Str+'<param name="EnableContextMenu" value="1">';
    Str=Str+'<param name="ClickToPlay" value="1">';
    Str=Str+'<param name="InvokeURLs" value="1">';
    Str=Str+'<param name="DefaultFrame" value="datawindow"></object>';
    break;
   case "gif":
   case "jpg":
   case "bmp":
//    Str='<img src="'+furl+'" width=125 height=100>';
    Str='<img src="'+furl+'">';
    break;
   default:
    alert('暂不支持此类型文件！');
    return false;
    break;
  }
  divImg.innerHTML=Str;
 }
 else{
  document.formSend.Flag.value="Send";
  alert('请输入要预览的文件！');
  return false;
 }
}
</script>
</head>
<body topmargin="0" leftmargin="0">

<div align="center">
<table id="__01" width="312" border="0" cellpadding="0" cellspacing="0">
 <form action="" method="post" name="formSend" onSubmit="return check();" enctype="multipart/form-data">
  <tr>
 <td colspan="3" rowspan="2" background="images/send_m2p_mms_06.gif" valign="top"><table width="100%"  border="0" cellspacing="0" cellpadding="3">
   <tr>
  <td><div align="right">发送形式：</div></td>
  <td><select name="SendType" style="border: 1 solid #808080;width:130" οnchange="divshow();">
  <option value="远程地址">远程地址</option>
  <option value="上传文件">上传文件</option>
  </select></td>
  <td><input type="hidden" name="Flag" value="Send"></td>
   </tr>
   <tr>
  <td colspan="3"><div id="divHttp" style="display:block "><table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
   <td width="122" align="right">远程地址：&nbsp;</td>
   <td width="140"><input type="text" name="HAdd" size="20" style="border: 1 solid #808080" onChange="document.formSend.Flag.value='Send';document.all.divImg.innerHTML='';"></td>
   <td width="147" align="center">&nbsp;</td>
    </tr>
  </table>
  </div><div id="divFile" style="display:none "><table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
   <td width="94" align="right">上传文件：&nbsp;</td>
   <td width="188"><input type="file" name="UFile" size="20" style="border: 1 solid #808080" onChange="document.formSend.Flag.value='Send';document.all.divImg.innerHTML='';"></td>
   </tr>
  </table>
  </div></td>
  </tr>
 </table></td>
 <td width="60" height="41"><div align="center" id="divImg"></div></td>
 </tr>
  <tr>
 <td align="center" background="images/send_m2p_mms_09.gif"><input type="button" value="预览" onClick="document.formSend.Flag.value='UpLoad';View();" style="cursor:hand"></td>
  </tr>
</form>
</table>
</div> 

银狐被占用
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS下载远程文件
03-13
利用微软的XMLMHTTP组件实现的远程文件下载，纯JS实现，可以显示文件大小、下载速度、下载进度、已下载大小。 使用HTA编写界面。
js下载远程图片
宏斌的博客
11-01 609
a标签的download属性无法下载远程图片 可以将图片转换成 blob 然后下载 如 <a href="https://xxxx.xxx/xxxx.png" download="xxx.png"> 下载 </a> 转换blob下载 /** * blob文件下载 * @param {Blob} blob * @param {string} fileName * @return {*} void */ export const downloadBlob = (b.
js两种获取远程图片的base64编码功能
最新发布
阿赛
05-29 212
【代码】js两种获取远程图片的base64编码功能。
兼容浏览器图片上传本地预览功能js脚本
Fiona的专栏
10-14 744
一、图片上传实现本地预览                 由于上传图片功能，现在大多数都需要在本地实现预览，为了能够更好的让用户体验到效果，实现成品的证明，需要兼容好几种浏览器，所有通过各个例子整合了这个例子插件，兼容火狐、谷歌、ie8，其他的没有进行测试过 (function($){ jQuery.fn.extend({ uploadPreview: functi
JS预览图像将本地图片显示到浏览器上的代码
weixin_30522095的博客
08-26 174
js代码实现： 从file域获取本地图片url并将本地图片显示到浏览器上。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;...
viewer.js实现图片预览功能
10-15
这两个文件分别包含了样式和脚本，是实现图片预览功能的基础。在HTML文件中，你需要将它们引入到页面头部： ```html <script src="./viewer.js" type="text/javascript" charset="utf-8"> ``` 接下来，我们需要...
Java web使用pdf.js在线预览远程服务器上的pdf文件
02-08
"Java Web使用pdf.js在线预览远程服务器上的pdf文件"这个主题涵盖了如何利用pdf.js库实现在Web环境中流畅、安全地预览PDF文档。pdf.js是Mozilla开发的一个开源项目，它允许开发者在浏览器端直接渲染PDF内容，无需...
整合ckeditor+ckfinder实现图片或文件上传功能
10-11
在IT行业中，富文本编辑器是网页开发中不可或缺的一部分，它们允许用户在网页上进行文本格式化、插入图片和链接等操作。`ckeditor`是一款知名的开源JavaScript富文本编辑器，而`ckfinder`则是一个与之配合的文件管理...
jquery.media.js 插件实现在线预览PDF文件
04-12
9. **测试和调试**：在实际项目中，使用`jquery.media.js`预览PDF文件时，需要进行充分的测试，确保在各种浏览器和设备上都能正常工作。开发者可以利用Chrome开发者工具、Firefox开发者版等工具进行调试。 总结，`...
在浏览器中预览图片
lijinghua1245的博客
02-21 1420
后台吧图片写到response 的输出流中 @RequestMapping(value = "/file/get", method = RequestMethod.GET) public void getFile(String uuid, HttpServletRequest req, HttpServletResponse res) throws Exception { res
JS下载网络图片到本地
weixin_45229447的博客
05-24 1296
【代码】JS下载网络图片到本地。
JavaScript-实现图片的下载(本地图片，远程图片，多个下载)
qq_54140719的博客
11-18 4100
实现图片的下载(本地图片，远程图片，多个下载)。主要通过标签来实现，将要下载的文件链接设置为href属性，将文件名设置为download属性，然后模拟点击这个链接即可触发下载。
js 下载网络图片
欢迎所有人，批评指正！
02-22 963
js下载远程图片 /** * 下载图片并重命名 * download('https://www.baidu.com/img/baidu_resultlogo@2.png', 'ab.png') */ /** * 下载 * @param {String} url 目标文件地址 * @param {String} filename 想要保存的文件名称 */ export function downloadRemoteImg(url, filename) { getBlob(url, funct
js 将远程图片转化为base64及下载远程图片
weixin_34419321的博客
02-23 1859
code //将远程图片转化为base64 getBase64(i...
如何在浏览器中执行js脚本
热门推荐
qq_36742720的博客
01-20 1万+
方式1：F12打开调试工具，利用控制台运行JS脚本 方式2:Chrome snippets 小脚本 我们也可以在 Chrome 浏览器中创建一个脚本来执行，在开发者工具中点击 Sources 面板，选择 Snippets 选项卡，在导航器中右击鼠标，然后选择 Create new snippet 来新建一个脚本文件： 如果你没看到 Snippets ，可以点下面板上到>>就能看到了。 点击 Create new snippet 后，会自动创建一个文件，你只需在右侧窗口...
使用Dreamweaver创建个人网站教程
- 网页内容应包含图片和文字，可以使用表格或框架进行布局，提供清晰的视觉结构。 - 添加行为，例如可以使用JavaScript或者Dreamweaver内置的脚本，实现如弹出对话框、页面跳转等效果。按照要求，至少添加两种行为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值