实现图片上传并显示到浏览器功能
2016-07-31 20:32
381 查看
本文介绍的是使用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 solid #222;
border-radius: 3px;
overflow: hidden;
cursor: pointer; /*IMG的父元素的cursor是pointer*/
}
.uploadImgForm{
display: none;
}
.uploadImg{
width:100px;
height: 100px;
}
</style>
<script type="text/javascript" rel="stylesheet" src="jquery-1.12.2.js"></script> //jquery-1.12.2.js这样的文件在当前文件所在目录的test目录下,静态文件有一个专门的存放目录
<script type="text/javascript" rel="stylesheet" src="jquery-form.js"></script>
<script type="text/javascript">
var imgType={"jpg":1,"jpeg":1,"png":1}
</script>
<script type="text/javascript">
$(function(){
$("#uploadImg").click(function(){
$(".uploadImgForm input[type=file]").trigger("click").change(function(){
var str=$(this).val();
var type=str.substr(str.lastIndexOf(".")+1);
if(!imgType[type]){alert("请选择图片文件!");return;} //判断选择的文件是不是图片格式的文件
$("#uploadImg").attr("src","loading.gif").css({"width":100,"height":100});
$.ajaxSetup({ cache: false });//这个不能少，否则ie下会提示下载
$(".uploadImgForm").ajaxSubmit({
url:"/upload",
method:"POST",
success:function(data,resText,jqXHR){
$("#uploadImg").attr("src",data.src).css({"width":100,"height":100}); //用来自服务端的数据修改图片的src
}
});
});
});
});
</script>
</head>
<body>
<div class="uploadImgDiv">
<img id="uploadImg" src="2.png">
</div>
<form class="uploadImgForm" method="post" enctype="multipart/form-data">
<input type="file" name="imgFile">
</form>
</body>
</html>
fileUpload.js
var express=require("express");
var bodyParser=require("body-parser");
var formidable=require("formidable");
var util=require("util");
var fs=require("fs");
var app=express();
app.set("views",__dirname);
app.set("view engine","ejs") //设置模版引擎是ejs
app.use(bodyParser.urlencoded({extended:false})); //body-parser可以用来解析form提交过来的数据,和contentType=application/x-www-form-urlencoded类型的数据
app.use(bodyParser.json()); //用来解析ajax的contentType="application/json"类型的数据
app.use(express.static(__dirname+"/test")); //设置静态文件的存放路径，前面upload.ejs中的很多静态文件都在个目录
app.get("/upload",function(req,res){
res.render("upload");
});
app.post("/upload",function(req,res){
var form=new formidable.IncomingForm();
form.uploadDir=__dirname+"/test"; //设置客户端上传来的文件的存放路径
form.keepExtensions=true; //是否保留文件的后缀
form.parse(req,function(err,fields,files){ //form.parse是解析文件函数，当它执行完成，文件就已经存在form.
console.log(util.inspect(files)); //files存储着上传过来的文件对象信息
console.log(util.inspect(fields)); //fields是除file之外的其他的表单数据，
var newName=files.imgFile.path.replace(files.imgFile.path.substr(files.imgFile.path.lastIndexOf("\\")+1),files.imgFile.name);
//file.imgFile.path表示上传文件在服务器的存放路径，包括文件名，files.imgFile.name是文件的真实名称
console.log(newName);
fs.rename(files.imgFile.path,newName,function(){ //重命名上传来的文件
res.write({src:files.imgFile.name}); //返回刚刚上传文件的文件名，当ajaxSubmit获取到后，这个文件名会被设置成一个img的src，从而加载这张图片
});
});
});
app.listen(1337,"127.0.0.1",function(){
console.log("server is listenning on 127.0.0.1:1337");
});
首先介绍一下思路，然后再上代码
一、思路：
大家都知道，<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 solid #222;
border-radius: 3px;
overflow: hidden;
cursor: pointer; /*IMG的父元素的cursor是pointer*/
}
.uploadImgForm{
display: none;
}
.uploadImg{
width:100px;
height: 100px;
}
</style>
<script type="text/javascript" rel="stylesheet" src="jquery-1.12.2.js"></script> //jquery-1.12.2.js这样的文件在当前文件所在目录的test目录下,静态文件有一个专门的存放目录
<script type="text/javascript" rel="stylesheet" src="jquery-form.js"></script>
<script type="text/javascript">
var imgType={"jpg":1,"jpeg":1,"png":1}
</script>
<script type="text/javascript">
$(function(){
$("#uploadImg").click(function(){
$(".uploadImgForm input[type=file]").trigger("click").change(function(){
var str=$(this).val();
var type=str.substr(str.lastIndexOf(".")+1);
if(!imgType[type]){alert("请选择图片文件!");return;} //判断选择的文件是不是图片格式的文件
$("#uploadImg").attr("src","loading.gif").css({"width":100,"height":100});
$.ajaxSetup({ cache: false });//这个不能少，否则ie下会提示下载
$(".uploadImgForm").ajaxSubmit({
url:"/upload",
method:"POST",
success:function(data,resText,jqXHR){
$("#uploadImg").attr("src",data.src).css({"width":100,"height":100}); //用来自服务端的数据修改图片的src
}
});
});
});
});
</script>
</head>
<body>
<div class="uploadImgDiv">
<img id="uploadImg" src="2.png">
</div>
<form class="uploadImgForm" method="post" enctype="multipart/form-data">
<input type="file" name="imgFile">
</form>
</body>
</html>
fileUpload.js
var express=require("express");
var bodyParser=require("body-parser");
var formidable=require("formidable");
var util=require("util");
var fs=require("fs");
var app=express();
app.set("views",__dirname);
app.set("view engine","ejs") //设置模版引擎是ejs
app.use(bodyParser.urlencoded({extended:false})); //body-parser可以用来解析form提交过来的数据,和contentType=application/x-www-form-urlencoded类型的数据
app.use(bodyParser.json()); //用来解析ajax的contentType="application/json"类型的数据
app.use(express.static(__dirname+"/test")); //设置静态文件的存放路径，前面upload.ejs中的很多静态文件都在个目录
app.get("/upload",function(req,res){
res.render("upload");
});
app.post("/upload",function(req,res){
var form=new formidable.IncomingForm();
form.uploadDir=__dirname+"/test"; //设置客户端上传来的文件的存放路径
form.keepExtensions=true; //是否保留文件的后缀
form.parse(req,function(err,fields,files){ //form.parse是解析文件函数，当它执行完成，文件就已经存在form.
console.log(util.inspect(files)); //files存储着上传过来的文件对象信息
console.log(util.inspect(fields)); //fields是除file之外的其他的表单数据，
var newName=files.imgFile.path.replace(files.imgFile.path.substr(files.imgFile.path.lastIndexOf("\\")+1),files.imgFile.name);
//file.imgFile.path表示上传文件在服务器的存放路径，包括文件名，files.imgFile.name是文件的真实名称
console.log(newName);
fs.rename(files.imgFile.path,newName,function(){ //重命名上传来的文件
res.write({src:files.imgFile.name}); //返回刚刚上传文件的文件名，当ajaxSubmit获取到后，这个文件名会被设置成一个img的src，从而加载这张图片
});
});
});
app.listen(1337,"127.0.0.1",function(){
console.log("server is listenning on 127.0.0.1:1337");
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 实现文件上传功能，并在页面上显示上传的图片
- vue实现的上传图片到数据库并显示到页面功能示例
- JavsScript实现不通过后台，实时显示上传图片的显示效果，兼容各个版本浏览器
- ace File-Input实现图片上传功能+colorBox显示图片
- ASP.NET MVC应用程序实现下载功能和显示上传的图片
- jquery实现兼容浏览器的图片上传本地预览功能
- jsp中实现上传图片即时显示效果功能
- jsp中实现上传图片即时显示效果功能
- jquery实现兼容浏览器的图片上传本地预览功能
- jquery实现兼容浏览器的图片上传本地预览功能
- 使用OkHttp+popupwindow显示底部状态栏实现上传图片功能
- 简单实现jQuery上传图片显示预览功能
- oracle的blob对象在客户端转化为java.sql.Blob，实现上传图片功能，同时将图片在客户端显示案例
- 实现Title Alt功能可以显示图片
- 图片上传时,本地显示预览功能
- [ASP]上传图片功能的又一实现（OLE对象）
- JavaScript实现类似Title Alt功能并且可以显示图片。
- 自定义控件实现无刷新上传图片,立即显示缩略图,保存图片缩略图<原创>