使用ajax上传文件的两种方式,一种是单文件上传,一种是支持多文件上传,前后端实现

时间:2021-07-04 16:23:10

尝试了两种文件上传的方式,使用的是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/wuyoujie/application