ajax消息通信，单文件上传和多文件上传的前后端实现

尝试了两种文件上传的方式，使用的是jquery的ajax请求发起上传，先介绍一下后端的实现：

后端使用nodejs，使用的是express框架，定义的请求规则是post一个ajax请求到http://127.0.0.1:3200/uploadfile，代码中对跨域访问做了处理:

router.all('/uploadfile', function (req, res) {
    res.header("Access-Control-Allow-Origin", "http://127.0.0.1:3200/uploadfile");
    res.header("Access-Control-Allow-Headers", "X-Requested-With, accept, origin, content-type");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    upload(req, res, function (err) {
        if (err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });;
});

1.前端发起上传的事情我采用了两种方式实现，先说一下单文件上传，这里我使用的是input的type=file，通过监听上传按钮的点击事件完成上传过程，直接贴代码吧：

<form id="myform">
    <input type="file" id="u_photo" name="userPhoto"/>
    <input type="button" id="submit-btn" value="Upload"/>
</form>

<script>
$(document).ready(function() {
$('#submit-btn').on('click', function () {
$.ajax({
url: 'http://127.0.0.1:3200/uploadfile',
type: 'post',
data: new FormData($('#myform').get(0)),
cache:false,
processData: false,
contentType:false,
success:function () {
alert('upload sucess...');
}
});
});
});
</script>

2.第二种是可支持多文件上传，对其中的样式做了一下封装，这里引用了两个单独处理上传和进度展示的模块，分别是ajaxfileupload.js和jquery.form.js，最后我会把验证后的代码地址贴到最后，图标只使用了一个div，点击div后会进入我引入的这两个模块，模块中完成文件的上传和进度展示：

<div id="fileuploader">Upload</div>

<script>
$(document).ready(function() {
$("#fileuploader").uploadFile({
url:"http://127.0.0.1:3200/uploadfile",
fileName:"userPhoto"
});
});
</script>

以上两种方法均在项目中验证，详情见：https://github.com/webPageDev/Demo