微信小程序：web-view上传音乐

最新推荐文章于 2024-03-02 13:36:56 发布

谢阳光Zzz

最新推荐文章于 2024-03-02 13:36:56 发布

阅读量1.1k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_32654773/article/details/90713946

版权

微信小程序专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
      body, html{
        height: 100%;
        overflow: hidden;
      }
      div{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      div img{
        width: 350px;
        height: 350px;
      }
      div #sub{
        width: 100px;
        height: 50px;;
      }
      #form1{
        display: none;
      }
      progress{
        margin-top: 10px;
        display: none;
      }
      #progress{
        display: none;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="images/1.jpg" alt="上传图片文件">
      <input type="button" value="上传文件" id="sub"></input>
      <progress></progress>
      <p id="progress">0</p>
    </div>

    <form id="form1" action="" method="post" enctype="multipart/form-data">
      <input type="file" name="upfile" id="upfile" value="" accept="audio/*" />
      <input type="button" value="上传" id="btn"/>
    </form>
  </body>
  <script type="text/javascript">

    $.ajax({
      type: "GET",                                     
      url: ``,                                     
      data: {
        username: '',
        password: ''
      },
      success: res => {
        sessionStorage.setItem('token', res.token)
      }                                                                     
    });

    const appName = getUrlParam('appName')
    const postUrl = getUrlParam('postUrl')
    const uid = getUrlParam('uid')
    const method = getUrlParam('method')
    const action = getUrlParam('action')

    $("#sub").click(function(){
      $('#upfile').click()
    });

    $('#upfile').on('change', function(){
      var sub = $("#sub")
      var formData = new FormData();
      sub.val('上传中...')
      sub.attr('disabled', true)
      $("progress").css('display','block'); 
      $("#progress").css('display','block'); 
      formData.append("music", document.getElementById("upfile").files[0]);
      formData.append("appName", appName);
      formData.append("uid", uid);
      formData.append("action", action);
      formData.append("method", method);
      formData.append("token", sessionStorage.getItem('token'));
      $.ajax({
        type: "POST",                                     // 数据提交类型
        url: postUrl,                                     // 发送地址
        data: formData,                                   // 发送数据
        async: true,                                      // 是否异步
        processData: false,                               // processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
        contentType: false, 
        xhr: function(){
          myXhr = $.ajaxSettings.xhr();  
          if(myXhr.upload){ 
            myXhr.upload.addEventListener('progress',progressHandlingFunction, false);   
          }  
            return myXhr;
        },  
        success: res => {
          if(res.resultCode == 1){
            sub.val('继续上传')
            sub.attr('disabled', false)
            alert('上传成功！')
            $("#progress").html("100%");
            $('progress').attr({value : 100, max : 100});   // 更新数据到进度条 
          }
        }                             
      });
    })

    // 上传进度回调函数：
    function progressHandlingFunction(e) {  
      if (e.lengthComputable) {  
        var percent = e.loaded/e.total*100;
        if(parseInt(percent) >= 90 || parseInt(percent) == 100){   // 留时间给后台处理数据
          $('#progress').html("95%");
          $('progress').attr({value : e.total*0.95, max : e.total});   // 更新数据到进度条  
          return
        }
        $('#progress').html(percent.toFixed(2) + "%"); 
        $('progress').attr({value : e.loaded, max : e.total});     // 更新数据到进度条  
      }  
    }  

    //获取url中的参数
    function getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");   // 构造一个含有目标参数的正则表达式对象
      var r = window.location.search.substr(1).match(reg);      // 匹配目标参数
      if (r != null) return unescape(r[2]); return null;        // 返回参数值
    }
  </script>
</html>

谢阳光Zzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序：web-view上传音乐

<!DOCTYPE html><html> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <script src="h...
复制链接

扫一扫

专栏目录