JS/Jquey 文件上传

Posted 2022-12-22 zero-zm

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>