前端上傳圖片到七牛雲

原文鏈接:https://blog.csdn.net/BingJingforyou/article/details/84837352

<html>
<head>

<!--引入七牛雲js文件-->

<script src="https://unpkg.com/[email protected]/dist/qiniu.min.js"></script>
    <!--引入jquery-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<form id="upload">
<input type="file" name="file"><!--選擇圖片-->
    <!--獲取並填寫token 可後臺java或php生成即可-->
<input type="text" name="token" value=''>
<button type="submit">提交</button>
</form>
</body>
</html>

<script>
    // 按鈕點擊事件
$('#upload').on('submit',function (e) {
    // 關閉默認的提交改爲ajax提交
    e.preventDefault();
        // 新建一個表單內容內容爲原表單內容
        var formData = new FormData(e.target);
        $.ajax(
          {
        type: 'POST',//類型爲post提交方式
        url: 'http://upload-z1.qiniup.com',//地址根據存取區域進行填寫
        contentType: false,
        data: formData,
        processData: false,//不轉化爲信息
        success: function (r) {
          console.log(r);  //上傳成功則打印返回值  有key 和hash
        },
        error: function (r) {
          console.log(r);
        }
      }
    );
  });
</script>
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章