Heim > Web-Frontend > uni-app > Hauptteil

So laden Sie Dateien in Uniapp hoch

coldplay.xixi
Freigeben: 2023-01-13 00:44:17
Original
9600 Leute haben es durchsucht

Uniapp-Upload-Dateimethode: H5-Seite einbetten, [web-view]-Tag verwenden, der Code lautet [< /web-view>].

So laden Sie Dateien in Uniapp hoch

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version, Dell G3-Computer.

Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial

Methode zum Hochladen von Dateien in Uniapp:

Um H5-Seiten einzubetten, müssen Sie die Webansichtverwenden >-Tag wie folgt: web-view标签,如下:

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

注意:

  • h5页面必须在项目目录:/hybrid/html/下面,因为这样uni-app才不会进行编译

  • @message

    <!DOCTYPE html>
    <html>
        <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;
            }
        </style>
        </head>
        <body>
            <div>
                <form action="" method="post">
                    <a href="javascript:;">选择文件
                        <input type="file" name="uploadFile" id="uploadFile" >
                    </a>
                </form>
                <p></p>
            </div>
            <div>
                <button type="button" data-action="redirectTo">确定</button>
                <button 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>
                $(".file").on("change", "input[type=&#39;file&#39;]", 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("");
                    }
                });
                $(&#39;.btn&#39;).click(function(evt) {
                    var formdata = new FormData(); // 创建一个form类型的数据
                    formdata.append("files",$("#uploadFile")[0].files[0]); // 获取上传文件的数据
                    formdata.append("operate","UpLoadFile"); // 获取上传文件的数据
                    formdata.append("name","name"); // 获取上传文件的数据
                    $.ajax({
                        url: &#39;http://47.97.163.146:8080/Controler.ashx&#39;,
                        type: "POST",
                        processData: false,
                        contentType: false,
                        data:formdata,
                        success: function(data) {
                            // debugger
                            console.log("这是请求成功的");
                        },
                        error: function(err) {
                            console.log("这是请求失败的");
                        }
                    });
                    var target = evt.target;
                    if (target.tagName === &#39;BUTTON&#39;) {
                        var action = target.getAttribute(&#39;data-action&#39;);
                        if (action == &#39;redirectTo&#39;) {
                            uni.redirectTo({
                                /* url: &#39;/pages/component/index&#39;, */
                                url: &#39;/pages/index/index&#39;,
                                success:function (d) {
                                    console.log("跳转成功");
                                },
                                fail:function(e){
                                    console.log(e);
                                },
                            });
                        }
                    }
                });
                
                //取消文件上传
                $(&#39;.btn1&#39;).click(function(evt) {
                    var target = evt.target;
                    if (target.tagName === &#39;BUTTON&#39;) {
                        var action = target.getAttribute(&#39;data-action&#39;);
                        if (action == &#39;navigateBack&#39;) {
                            uni.navigateBack({
                                delta: 1
                            });
                        }
                    }
                });
                
                
            </script>
        </body>
    </html>
    Nach dem Login kopieren
    Hinweis:
    h5-Seite muss sich im Projektverzeichnis befinden: /hybrid/html/ code>, da <code>uni-app nicht kompiliert wird


  • @message-Ereignis ist der Rückruf für die h5-Seite, um Daten an die Anwendung zu senden

    h5-Seitencode:

    rrreee🎜 🎜Verwandte kostenlose Lernempfehlungen: 🎜Programmiervideos🎜🎜🎜
  • Das obige ist der detaillierte Inhalt vonSo laden Sie Dateien in Uniapp hoch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage