若尧

ajax的一些小技巧

1.利用html5 formData实现ajax上传文件

1
2
3
4
5
<div id="coverbg">
  <form id="uploadbgPic" action="url/uf" method="post" enctype="multipart/form-data">
      <input type="file" name="file" accept="image/*" class="upload2">
  </form>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('#coverbg').on('change','.upload2',function(){
    var formData = new FormData($("#uploadbgPic")[0]);
    //console.log(formData)
    $.ajax({
        url: url + '/uf' ,
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (result) {
            var data = result.data;
            $('#coverbg').find('img').attr('src',baseAccessUploadPathPc + data);
        },
        error: function (err) {
           console.log(err);
        }
    });
});

2.递归运行解决ajax无顺序，不用for循环并发

如果要重复发起请求，for循环不能保证顺序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var n = 0;
(function uploadPic(){
    var formData = new FormData(n);
    formData.append('file', file[n]);
    $.ajax({
        url: ctx + '/uf',
        type: 'POST',
        data: formData,
        async: true,
        cache: false,
        contentType: false,
        processData: false,
        success: function (result) {
            if (result.suc) {
                 var data = result.data;
                 /**
                 * 数据处理
                 */
                 n++;
                 if(n<file.length)uploadPic();
            }else{
                 alert(result.msg)
            }
        },
        error: function (err) {
            console.log(err);
        }
     });
})(n);

打赏