本文通过Node.js和前端技术详细介绍了如何实现图片上传，并即时在浏览器中显示。利用formidable中间件处理文件上传，结合jQuery的ajaxSubmit进行异步提交，解决了文件传输的问题。用户点击上传按钮，触发文件选择，选择后通过ajaxSubmit将图片数据发送到服务器，服务器端使用formidable解析文件，重命名并保存，然后将新文件名回传给前端更新图片源。
本文介绍的是使用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.47元/天 解锁文章
扫一扫
1592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
