uni-app实现文件上传(h5方式)

1.嵌入H5页面,需要采用web-view标签,如下:

<web-view src="/hybrid/html/index.html" @message="handleMessage"></web-view>

注意:

  • h5页面必须在项目目录:/hybrid/html/下面,因为这样uni-app才不会进行编译
  • @message事件是h5页面向应用发送数据的回调 

     

    2.h5页面代码:

  • 复制代码

    <!DOCTYPE html>
    <html lang=”zh”>
    <head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
    <title>上传文件</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    .head-btn{
    text-align: center;
    margin-top: 50px;
    }
    .file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 10px;
    padding: 24px 50px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    font-size: 40px;
    }
    .file input {
    position: absolute;
    font-size: 200px;
    right: 0;
    top: 0;
    opacity: 0;

    }
    .file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
    }
    .determine{
    color: #FFFFFF;
    background-color: #007AFF;
    display: inline-block;
    font-size: 20px;
    border-radius: 5px;
    padding: 8px 24px;
    }
    .showFileName{
    display: inline-block;
    height: 30px;
    min-width: 300px;
    }
    .btn {
    display: block;
    margin: 20px auto;
    padding: 5px;
    background-color: #007aff;
    border: 0;
    color: #ffffff;
    height: 40px;
    width: 200px;
    border-radius: 5px;
    }
    .btn1 {
    display: block;
    margin: 20px auto;
    padding: 5px;
    background-color: #007aff;
    border: 0;
    color: #ffffff;
    height: 40px;
    width: 200px;
    border-radius: 5px;
    }

    .btn-red {
    background-color: #dd524d;
    }

    .btn-yellow {
    background-color: #f0ad4e;
    }

    .desc {
    padding: 10px;
    color: #999999;
    }
    .text{
    background-color: #007AFF;
    text-align: center;
    font-size: 18px;
    color: white;
    height: 45px;
    }
    .text-in{
    padding-top: 10px;
    }
    .body{
    background-image: url(../../static/timg.jpg);
    }

    </style>
    </head>
    <body class=”body”>
    <div class=”text”>
    <div class=”text-in”>
    文件上传
    </div>
    </div>
    <div class=”head-btn”>
    <form action=”” method=”post”>
    <a href=”javascript:;” class=”file”>选择文件
    <input type=”file” name=”uploadFile” id=”uploadFile” >
    </a>
    </form>
    <p class=”showFileName”></p>

    </div>
    <div>
    <button class=”btn” type=”button” data-action=”redirectTo”>确定</button>
    <button class=”btn1″ type=”button” data-action=”navigateBack”>取消上传</button>
    </div>

    <script src=”./js/jQuery1_10_2.js”></script>
    <script type=”text/javascript” src=”https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js”></script>
    <script>
    console.log(“转检编号:”+getQuery(‘id’)); //转检编号
    //取url中的参数值
    function getQuery(id) {
    // 正则:[找寻’&’ + ‘url参数名字’ = ‘值’ + ‘&’](’&’可以不存在)
    let reg = new RegExp(“(^|&)”+ id +”=([^&]*)(&|$)”);
    let r = window.location.search.substr(1).match(reg);
    //console.log(“r=”+r);
    if(r != null) {
    // 对参数值进行解码
    return decodeURIComponent(r[2]);
    }
    return null;
    }

    $(“.file”).on(“change”, “input[type=’file’]”, function() {
    let filePath = $(this).val();
    // console.log(filePath);
    localStorage.setItem(“fileAddress”, filePath);
    let lastname = localStorage.getItem(“fileAddress”);
    if (lastname != “”) {
    $(“.showFileName”).html(lastname);
    } else {
    $(“.showFileName”).html(“”);
    }
    });
    $(‘.btn’).click(function(evt) {
    var fileUrl;
    var formdata = new FormData(); // 创建一个form类型的数据
    formdata.append(“files”,$(“#uploadFile”)[0].files[0]); // 获取上传文件的数据
    formdata.append(“operate”,”UpLoadFile”); // 操作码
    formdata.append(“name”,”name”);
    //console.log(“files:”+formdata.get(“files”) + “,name:” + formdata.get(“name”))
    console.log(“begin”)
    $.ajax({
    url: ‘http://47.97.163.146:8080/Controler.ashx’,
    type: “POST”,
    async:false, //同步请求,否则内部嵌套的ajax不会运行
    processData: false,
    contentType: false,
    data:formdata,
    dataType:”json”,
    success: function(data) {
    //更新数据库添入附件的url
    console.log(“data:” + JSON.stringify(data))
    fileUrl = data.url;
    // var formdata1 = new FormData(); // 创建一个form类型的数据
    // formdata1.append(“operate”,”UploadFileZJ”); // 操作码
    // formdata1.append(“ID”,getQuery(‘id’));
    // formdata1.append(“url”,fileUrl);
    console.log(“url地址:”+fileUrl);
    console.log(“转检编号:”+getQuery(‘id’));
    //console.log(“url:”+formdata1.get(“url”) + “,ID:” + formdata1.get(“ID”)) //查看url和转检id
    $.ajax({
    url: ‘http://47.97.163.146:8080/Controler.ashx’,
    type: “POST”,
    data:{operate:”UploadFileZJ”,ID:getQuery(‘id’),url:fileUrl},
    dataType:”json”,
    success: function(data){
    console.log(“更新成功”)
    },
    error: function(err) {
    console.log(555)
    console.log(“更新失败的”);
    }
    })
    console.log(“这是请求成功的”);
    },
    error: function(err) {

    console.log(“这是请求失败的”);
    }
    });
    console.log(“end”)

    var target = evt.target;
    if (target.tagName === ‘BUTTON’) {
    var action = target.getAttribute(‘data-action’);
    if (action == ‘redirectTo’) {
    uni.redirectTo({
    url: ‘/pages/index/index’,
    success:function (d) {
    console.log(“跳转成功”);
    },
    fail:function(e){
    console.log(e);
    },
    });
    }
    }
    });

    //取消文件上传
    $(‘.btn1’).click(function(evt) {
    var target = evt.target;
    if (target.tagName === ‘BUTTON’) {
    var action = target.getAttribute(‘data-action’);
    if (action == ‘navigateBack’) {
    uni.navigateBack({
    delta: 1
    });
    }
    }
    });

    </script>
    </body>
    </html>

    复制代码

    样式图:


发表评论

电子邮件地址不会被公开。 必填项已用*标注