实现图片上传并显示到浏览器功能

本文介绍的是使用node.js实现图片的上传并及时显示到浏览器的功能,希望可以帮得到大家,后台不用node.js,用其他的也行,思路是一样的。

首先介绍一下思路,然后再上代码

一、思路:

    大家都知道,<input type="file" name="imgUpload">,这个在浏览器显示的非常丑,所以我们可以通过点击其他的元素来触发<input type="file" name="imgUpload">的点击事件,实现漂亮的文件上传,当你选择好文件后,会触发<input type="file" name="imgUpload">,的change事件,在该事件中利用jquery插件jquery-form.js的ajaxSubmit函数来实现表单的异步提交,那就会有人问了,为什么并不直接用jquery的ajax函数异步提交呢,这个问的好,因为ajax不好传输文件数据,我在后台一直不能正确的获得使用ajax传递过来的数据。

   当前端可以正确的发送数据给后台之后,那么后台就要获取数据了,我使用的是node.js的formidable中间件,如果使用的是Java做后台的话,也有Java的一套获取文件数据的api。

二、代码:

upload.ejs

<html> 
 <head>
  <style>
   .uploadImgDiv{
     width:100px;
     height: 100px;
     border:1px sol

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值