预览待上传的本地图片

本文介绍了一种利用JavaScript和DOM实现在网页上预览用户所选图片的方法,并探讨了如何判断文件类型及在Firefox浏览器中遇到的问题。

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

上传文件是一种很普通的Web应用,尤其以上传图片更为常见。今天我们就在Web标准的范围内谈谈与这个主题相关的内容(只限前端部分,上传的实现当然就不在此列了),关键词是:Javascript、DOM和Firefox。

表单

  先创建一个file表单域,我们需要用它来浏览本地文件。

<form name="form1" id="form1" method="post" action="upload.php">
	<input type="file" name="file1" id="file1" />
</form>
判断文件类型

  当用户选择了一个图片文件时,我们希望他能马上看到这张图片的缩略图,以便他能确认没有把自己的光屁股照片当作头像传到我们的服务器上^_^。

  在预览之前我们还得先判断一下用户选择的是不是一个图像文件,如果他想用一个.rar文件做头像的话我们也需要礼貌地提醒一下。

 

<form name="form2" id="form2" method="post" action="upload.php">
	<input type="file" name="file2" id="file2"
	onchange="preview()" />
</form>

 

Javascript函数实现,注意我们使用DOM方法getElementById来访问对象。不要再使用forminputname属性来访问对象了,只有IE才这么干。

 

<script type="text/javascript">
 function preview2(){
  var x = document.getElementById("file2");
  if(!x || !x.value) return;
  if(x.value.indexOf(".jpg")<0
   && x.value.indexOf(".jpeg")<0
   && x.value.indexOf(".gif")<0){
   alert("您选择的似乎不是图像文件。");
  }else{
   alert("通过");
  }
 }
</script>

 

这里有一个问题,如果用户选择了名为“fake.jpg.txt”的文件,这段脚本仍旧会认为这是一个合法的图像文件。

一个可行的解决方案是先把文件名转换成小写,再取文件路径的最后4到5位,判断一下文件的扩展名是否确为我们支持的图像文件扩展名。不过这种方案略显笨拙,也没有什么美感可言,我们换一种方案:用“正则表达式”来判断文件扩展名。

 

<script type="text/javascript">
	function preview3(){
		var x = document.getElementById("file3");
		if(!x || !x.value) return;
		var patn = //.jpg$|/.jpeg$|/.gif$/i;
		if(patn.test(x.value)){
			alert("通过");
		}else{
			alert("您选择的似乎不是图像文件。");
		}
	}
</script>

 

如果从来没有接触过正则表达式,那这段脚本对你可能会有些晦涩,不妨Google一把,看看是否可以先学习学习这方面的知识。我可以向你保证花四五个小时学点正则表达式会是你最近三个月内作出的最明智选择^_^。

  回到这段脚本上来,即使你还看不懂正则表达式那两行,但整段脚本的美感还是很明显的:简洁、直接、语义流畅,这与Web标准关于XHTML的要求是一致的,与Web设计师或开发者天生的“完美”主义也是一致的。

  jjww一大段之后,我们转入重点——

预览图片

  预览功能的基本设计思路是很清晰的:创建一个img元素,再把文件域的value值赋值给img元素的src属性。

 

<form name="form4" id="form4" method="post" action="#"> 

<input type="file" name="file4" id="file4" οnchange="preview4()" /> 

<img id="pic4" src="" alt="图片在此显示" width="120"/>

</form>

<script type="text/javascript">

function preview4(){ 

var x = document.getElementById("file4");

var y = document.getElementById("pic4"); 

if(!x || !x.value || !y) return; 

var patn = //.jpg$|/.jpeg$|/.gif$/i; 

if(patn.test(x.value)){  

y.src = "file://localhost/" + x.value; 

}else{

   alert("您选择的似乎不是图像文件。"); 

}

}

</script>

 

 

如果你用的是Firefox(或Opera),可能会发现什么也没有发生。

是的,很不幸Firefox的安全策略不允许我们显示一个用户的本地图像文件。

不知道他们为什么要这么做,我个人觉得图像文件并不会造成严重的安全性问题。

即使是不久前比较热门的那个会引起Windows崩溃的jpeg文件,要显示它的前提条件是用户自己选择了这个文件或者你知道这个文件在用户硬盘上的准确路径。

所以我想这种策略很可能来自于一个“懒惰”的开发人员,他并不想多写一些程序来区分这个本地文件是一个图像文件还是一个恶意文件,Firefox对安全性的要求让他们有些过于敏感了。

  让Firefox显示本地文件的唯一办法就是修改它的默认安全策略:

在Firefox的地址栏中输入“about:config”
继续输入“security.checkloaduri”
双击下面列出来的一行文字,把它的值由true改为false
  然后你可以再试试上面预览,everything works well!可惜的是我们并不能要求所有的用户都去修改这个值(更不用说修改的过程还挺麻烦),所以这对我们来说毫无意义。我们能做的也许就是接受Firefox不能预览本地图片这种“可笑”的局面。

用DOM来创建对象
  在上面的XHTML代码中,我们为了预览图片,事先加入了一个没有设置src的img对象。除去不美观、代码冗余之外,如果用户浏览器不支持Javascript,他不仅无法使用这个功能,还要接受页面上一个永远不会显示出来的破图。

要解决这个问题,我们就需要在“运行时”再生成这个img对象,途径还是DOM。

 

<form name="form5" id="form5" method="post" action="#"> 

<input type="file" name="file5" id="file5" οnchange="preview5()"/>

</form>

<script type="text/javascript">

function preview5(){ 

var x = document.getElementById("file5");

  if(!x || !x.value) return;

  var patn = //.jpg$|/.jpeg$|/.gif$/i;

  if(patn.test(x.value)){

    var y = document.getElementById("img5");

    if(y){

      y.src = 'file://localhost/' + x.value;

    }else{      var img=document.createElement('img');

      img.setAttribute('src','file://localhost/'+x.value);

      img.setAttribute('width','120');

      img.setAttribute('height','90');

      img.setAttribute('id','img5');

      document.getElementById('form5').appendChild(img);

    }

  }else{    alert("您选择的似乎不是图像文件。");

  }}

</script>

 

这样就相对比较完美了。我也不解释上面这些DOM方法的具体意义,Google一下什么都有了。

DOM和正则表达式一样,都是“包你不悔”的实用技术,如果你希望更多了解、深入学习、或者顺利实践Web标准,DOM是不可或缺的。从我本人最近的体会来说,Javascript+DOM+CSS蕴藏着强大的能量,就看你怎么释放它了。

 

http://blog.youkuaiyun.com/feng_sundy/archive/2007/01/05/1474966.aspx

### 使用 ElementUI 实现图片上传本地服务器 为了实现在 ElementUI 中将图片上传本地服务器的功能,可以利用 `el-upload` 组件来构建上传界面。此组件提供了多种配置选项以便于开发者自定义上传行为。 #### HTML 结构与基本设置 创建一个简单的HTML结构用于放置上传按钮和其他必要的DOM元素: ```html <template> <div id="app"> <!-- 图片上传控件 --> <el-upload class="upload-demo" action="/api/upload" // 设置请求地址为本地API端点 :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeAvatarUpload" multiple :limit="3" :file-list="fileList"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> <!-- 查看大图对话框 --> <el-dialog v-model="dialogVisible" size="tiny"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </div> </template> ``` 上述代码片段展示了如何通过指定action属性指向后端处理接口,并设置了几个事件处理器函数名以及一些额外参数如最大数量限制等[^1]。 #### JavaScript 方法实现 接下来,在Vue实例内部编写相应的逻辑方法以响应用户的交互操作: ```javascript <script> export default { data() { return { fileList: [], // 存储已上传成功的文件列表 dialogImageUrl: '', // 当前查看的大图URL dialogVisible: false// 控制模态框显示状态 }; }, methods: { handleRemove(file, fileList) { // 移除文件时触发 console.log(file, fileList); }, handlePreview(file) { // 点击缩略图预览时触发 this.dialogImageUrl = file.url; this.dialogVisible = true; }, beforeAvatarUpload(file){ // 文件上传之前执行的钩子函数 const isJPGorPNG = (file.type === 'image/jpeg' || file.type === 'image/png'); const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPGorPNG) { this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isJPGorPNG && isLt2M; } } } </script> ``` 这段JavaScript部分包含了三个主要的方法:当用户尝试移除某个文件时会调用`handleRemove()`;点击某张图片进行预览则会激活`handlePreview()`;而在实际发送HTTP POST请求给服务端之前,则由`beforeAvatarUpload()`负责验证待传入的数据是否满足条件[^2]。 #### 后端 API 接口设计 最后一步是在服务器上搭建好接收这些POST请求的服务程序。这里假设采用Node.js作为运行环境,Express框架简化路由管理过程: ```nodejs const express = require('express') const multer = require('multer') // 处理multipart/form-data编码格式数据中间件 const app = express() let storage = multer.diskStorage({ destination: function(req, file, cb){ let dir='./uploads/'; mkdirp(dir,(err)=>{cb(null,dir)}); }, filename:function(req,file,cb){ cb(null,new Date().toISOString()+path.extname(file.originalname)) } }) var upload = multer({storage}).array('files',12) app.post('/api/upload',(req,res)=>{ try{ upload(req,res,function(err){ if(!err){ res.json({"status":"success","msg":"File uploaded successfully"}); }else{ throw new Error(); } }) }catch(e){ res.status(500).json({'error':e}); } }) ``` 该段Node.js代码使用Multer库解析来自客户端提交过来的二进制流形式的照片资料,并将其保存到项目根目录下的`./uploads/`路径下[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值