JS/Jquey 文件上传

更多JS实战记录，请前往：https://www.yuque.com/smallwhy/yyvuqy

1. 单文件上传

1. js

function postData(){
    // 构参，参数需要{photo: 上传的文件，service: 'App.Passion.UploadFile', token: 'sdfewdsdfe'}
    // 如果参数只有photo,参数可简化为 new FormData($("#photo")[0].files[0]);key值file为input的name值；
    var formData = new FormData();
    formData.append("photo",$("#photo")[0].files[0]); // $("#photo")[0].files[0]；获取上传的文件；单文件上传
    formData.append("service",'App.Passion.UploadFile');
    formData.append("token",token);
    // 请求
    $.ajax({
        url:'http://www.baidu.com/',
        type:'post',
        data: formData,
        contentType: false,
        processData: false,
        success:function(res){
            console.log(res.data);
            if(res.data["code"]=="succ"){
                alert('成功');
            }else if(res.data["code"]=="err"){
                alert('失败');
            }else{
                console.log(res);
            }
        }
    })
}

2.html

<input type="file" title="单文件上传" name="photo" id="photo" value="" placeholder="免冠照片">

2. 多文件上传

1. js

$('#photoForm input').change(function() {
    // 构参； 参数值只需要key为“myfiles”，value为所选文件的对象；
    var photoForm = $('#photoForm')[0],
    photoFormData = new FormData(photoForm); // 获取文件列表 $('#photoInput')[0].files;
    // 请求
   $('.loading').show();
    $.ajax({
        type: 'POST',
        url: "/cert/filesUpload",
        data: photoFormData,
        // 告诉jQuery不要去处理发送的数据
        processData : false,
        // 告诉jQuery不要去设置Content-Type请求头
        contentType : false,
        complete:function(){
             $('.loading').hide();
             $("#photoForm input").val('');
        },
        success:function(d){
            // 上传成功后操作。
        }
     });
   });

2. html

<form id="photoForm">
     <input id="photoInput" type="file" title="多文件上传" name="myfiles" multiple="multiple">照片导入
</form>

3. 应用实例

(1). 图片上传成功，获取图片属性

https://github.com/smallwhy/img-load-getattribute

(2). 图片上传成功，返回来图片路径在本地显示

    var str = $('<img src="'+服务器返回的图片路径+'" onerror="reGetImg(this, \''+服务器返回的图片路径+'\')"/>');
    $(elem).next('.img-container').html(str[0]);

    function reGetImg(elem, imgurl) {
        setTimeout(function() {
            $(elem).attr('src',imgurl+'?v='+Math.random());
        }, 2000);
    }