原生jspost上传图片

㈠ nodejs内置模块有哪些

一、Express框架

前面的章节已经介绍过了，可以使用npm来安装node.js模块。具体操作请参照以前写的nodejs概论。

Express是一个nodejs的web开源框架，用于快速的搭建web项目。其主要集成了web的http服务器的创建、静态文本管理、服务器URL地址请求处理、get和post请求处理分发、session处理等功能。

使用方法，在cmd中打开你所想创建web项目的路径。然后输入

Express appname

即可创建一个名为appname的web项目。控制台打印结果

在jada文件中是可以使用for循环和if判断语句的，可以让你体会类似JSP的<%%>和php的<php></php>在网页上输出数据的快感。

三、forever模块

nodejs作为http服务器，需要确保服务顺利进行，要注意一下两点：

1.后台服务运行，监控运行日志，以及http运行日志；

2.确保项目的正常安全运行，Node.js的启动命令node，很大程度无法满足运行需求；

Node.js的forever模块在第二点就可以起到很大的作用，同时其拥有监控文件更改、自动重启等功能。

forever模块的使用方法有两种：1.在命令行中使用

forever -l forever.log -o out.log -e err.log app.js
-l forever.log -o out.log -e err.log分别指定了forever的运行日志，脚本流水日志，脚本运行错误日志，启动后将在本文件夹下产生out.log、err.log文件。

2.在编码中require forever模块使用。

四、Socket.IO模块

Socket.IO模块主要功能是将WebSocket协议应用到所有浏览配厅器。主要用于实时的长连接多求情项目中。

例如：在线联网游戏，实时聊天、实时股票查看、二维码扫描登录掘粗等。

安装方法仍然是在cmd在中输入npm install socket.io

如何使用Socket.IO来创建一个项目。

需要分别实现服务端和客户端的逻辑：

先创建一个服务端的node.js脚本index_server.js

var app = require('http').createServer(handler)//创建服务器app
, io = require('socket.io').listen(app)//引用socket.io模块监听app
, fs = require('fs')//引用文件处理模块
app.listen(80);//指定app监听的端口，第二个参数127.0.0.1可省略

function handler (req, res) {
fs.readFile(__dirname + '/index.html', function (err, data) { if (err) {
res.writeHead(500); return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}

io.sockets.on('connection', function (socket) {
socket.emit('判卖镇news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});

其中，socket.emit()为Socket发送消息的函数，第一个参数表示发送消息的key值，第二个参数为发送消息的内容，也就是发送的数据。

Socket。on()为Socket接收消息的函数，第一个参数为接收消息的可以值，第二个参数为回调函数，其中回调函数携带的参数为接收消息所发送的数据。

接下来web前端如何使用javaScrit 来连接Socket服务器。

新建一个index_client.html

<script type="text/javascript" src="socket.js"></script>
<script type="text/javascript"> var socket = io.connect('http://localhost');//创建本地sock连接
socket.on('news',function (data) {//Socket接收news消息时执行回调函数 console.log(data);
socket.emit('my other event',{my:'data'});
});</script>

<script type="text/javascript" src="socket.js"></script>加载已经安装好的Socket.io的本地JavaScrit文件。
var socket = io.connect('http://localhost');因为端口为80，所有这里可以不端口号
socket.on('news',function (data)｛｝//客户端接收news消息成功后，发送my other event消息到服务端，发送的消息内容为json对象{my:'data'}

接下来只需要运行服务端的index_server.js文件来启动socket服务

效果：在浏览器输入http://127.0.0.1按F12调出浏览器的控制台console即可看见打印出了一个object对象。

执行完毕后可能会报错：catnot find mole socket.io，说明你的socket.IO没有安装，或已经安装并配置为全局，但你的安装路径并没有配置到在path中，所有无法引用。
你可以选择配置path，或者安装到项目内。这里建议安装到你的项目目录下，而不是简单粗暴的配置为全局。先卸载npm uninstall socket.io 进入指定目录后安装node index_server.js

socket.io详细请参阅 http://cnodejs.org/topic/50a1fcc7637ffa4155b5a264

五、request模块

request模块为开发者提供了一种简单访问HTTP请求的方法。request还支持HTTPS的访问方法。

安装：

npm install requset

request模块基本上覆盖了所有的HTTP请求方式如GET，POST，HEAD，DEL等。但其最基本的两个方法是request.get()和request.post().

get和post的区别

get：

1.使用get向服务器发出和接收的请求会附在url之后。类似：http://www..com？id=1221&name=5555这个url中传递了两个参数，一个为id，一个为name。

2.get请求不能超过1024个字节。

post没有限制，也不会附在url上。

接下来做一个简单的实例

get实例：

首先新建一个服务器app_get.js

var http= require("http");
http.createServer(function(req,res){
res.writeHead(200,{'content-Type':'text/plain'});
res.end('Hello world '+req.method);
}).listen(1337,"127.0.0.1");

再建一个发送求情的request_get.js文件

var request=require('request');
request.get("http://127.0.0.1:1337",function(error,response,result){
console.log(result);
});

在CMD中运行app_get.js，运行成功后，再打开一个cmd（之前的cmd不要关闭），执行request_get.js文件。

执行后的结果如下

hello world
GET

可以看出，通过request.get方法访问

http://127.0.0.1:1337 返回的结果就是res.end（）的参数

post实例：
和上面一样，先新建服务器app_post.js

var http= require("http"),
querystring=require('querystring');
http.createServer(function(req,res){ var postData=""; //开始异步接收客户端post的数据
req.addListener("data",function (postDataChunk) {
postData += postDataChunk;
}); //异步post数据接收完毕后执行匿名回调函数
req.addListener("end",function(){ var postStr=JSON.stringify(querystring.parse(postData));
res.writeHead(200,{'content-Type':'text/plain'});
res.end(postStr+' '+req.method);
});
}).listen(1400,"127.0.0.1");

然后再新建一个request_post.js

var request=require("request");
request.post('http://127.0.0.1:1400',{form:{'name':'ermu','book':'node.js'}},function (error,response,result) {
console.log(result);
})

像上面一样在cmd中执行后显示的结果如下：

D: odejssrc equest>node request_post.js
{"name":"ermu","book":"node.js"}
POST

request post提交了一个json对象{"name":"ermu","book":"node.js"}而服务器接通过获取该POST数据，然后返回客户端，同时将http请求方式也响应到客户端。

request post参数可以有两种传递方式。

其中，第一种是将url和form表单的数据作为json参数在request post传递。举例如下：

request.post('url':'http://127.0.0.1:1400',form:{'name':'ermu','book':'node.js'}},function (error,response,result) {
console.log(result);
})

另一种是将url和form作为两个参数，上面的实例就是使用这种方法。

六、 Formidable模块

该模块的目的是为了解决文件上传。

在原生的node.js模块中，提供了获取post数据的方法，但是并没有直接获取上传文件。

㈡ web前端上传图片的几种方法

下面给你介绍3种web前端上传图片的方法：

1.表单上传

最传统的图片上传方式是form表单上传，使用form表单的input[type=”file”]控件，打开系统的文件选择对话框，从而达到选择文件并上传的目的。

ajax无刷新上传

Ajax无刷新上传的方式，本质上与表单上传无异，只是把表单里的内容提出来采用ajax提交，并且由前端决定请求结果回传后的展示结果。

3.各类插件上传

当上传的需求要求可预览、显示上传进度、中断上传过程、大文件分片上传等等，这时传统的表单上传很难实现这些功能，我们可以借助现有插件完成。

如网络上传插件Web Uploader、jQuery图片预览插件imgPreview 、拖拽上传与图像预览插件Dropzone.js等等，大家可根据项目实际需求选择适合的插件。

㈢ js 模拟POST提交enctype="multipart/form-data"类型的表单

只是需要文件上传才用它的

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");

改成

xmlHttp.setRequestHeader("Content-Type","multipart/form-data;")。

㈣ 怎么在js 里面限制上传图片的大小不能超过 1M

这样设置的：

1、先用标签创建一个上传的表单。

<formid="form1"name="form1"method="post"action=""enctype="multipart/form-data">
<p><inputtype="hidden"name="MAX_FILE_SIZE"value="100000"/></p>
<p><inputname="userfile"id="userfile"type="file"onchange="check()"/></p>
</form>

2、用Javascript设置格式和大小。

<scriptlanguage="JavaScript"type="text/javascript">functioncheck(){varaa=document.getElementById("userfile").value.toLowerCase().split('.');//以“.”分隔上传文件字符串//varaa=document.form1.userfile.value.toLowerCase().split('.');//以“.”分隔上传文件字符串if(document.form1.userfile.value==""){alert('图片不能为空！');returnfalse;}else{if(aa[aa.length-1]=='gif'||aa[aa.length-1]=='jpg'||aa[aa.length-1]=='bmp'
||aa[aa.length-1]=='png'||aa[aa.length-1]=='jpeg')//判断图片格式{varimagSize=document.getElementById("userfile").files[0].size;alert("图片大小："+imagSize+"B")if(imagSize<1024*1024*1)alert("图片大小在1M以内，为："+imagSize/(1024*1024)+"M");returntrue;}else{alert('请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg的图片');//returnfalse;}}}</script>

图片超过1M则不能上传 如图：

㈤ 图片上传七牛token失效

由于公司后台web需要兼容到 IE8 ，对上传图片的模块进行了修改，本来是运用 h5自带的 上传文件方镇陆法，但是在 IE8,9 中原御碧顷生js不支持 input=file ，所以参照了七牛提供的上传方法。

图片上传到七牛需要先获取 token ，开始时没有想到token会失效的问题，通过QA测试发现偶尔会慧行报 七牛Post 401的错误。 今在七牛上传提供方法err的时候在调用一次获取token的方法。