美文网首页前端开发小册
ajax POST 上传文件

ajax POST 上传文件

作者: 国服最坑开发 | 来源:发表于2020-03-18 09:34 被阅读0次

    费话少说, 直接上代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="./jquery.js"></script>
    </head>
    <body>
    <form>
      <input type="file" name="file"/>
      <button onclick="upload();">upload</button>
    </form>
    
    <script>
    
      function upload () {
        console.log('start upload')
    
        let formData = new FormData()
    
        formData.append('file', $(':file')[0].files[0], 'server_side_file_name_key')
        formData.append('fileType', 'img')
    
        $.ajax({
          url: 'https://your_upload_url',
          dataType: 'json',
          type: 'POST',
          async: false,
          data: formData,
          processData: false,
          contentType: false,
          success: function (data) {
            console.log('succeed')
            if (data.errorCode === '0') {
              alert('上传成功! file Id :' + data.data)
            }
          },
          error: function (response) {
            console.log('failed')
            console.log(response)
          }
        })
      }
    
      })
    </script>
    </body>
    </html>
    

    注意点如下 :

    • 对于文件型对象上传,可能用到append的第三个参数, 用于服务端接口文件时的文件名
    • jquery 提取文件类型时, 使用 $(':file'), 也就是冒号的方式.

    相关文章

      网友评论

        本文标题:ajax POST 上传文件

        本文链接:https://www.haomeiwen.com/subject/jktqyhtx.html