Heim >Web-Frontend >uni-app >So laden Sie Dateien in Uniapp hoch

So laden Sie Dateien in Uniapp hoch

coldplay.xixiOriginal: 2020-12-09 15:53:599634Durchsuche

Uniapp-Upload-Dateimethode: H5-Seite einbetten, [web-view]-Tag verwenden, der Code lautet [085bab8b868b52f98deb65073cd9e8d00ab6f78b769a78e69d44cdccf50c68df].

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>

注意：

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>

Hinweis:

/hybrid/html/ code>, da <code>uni-app

@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!

Stellungnahme：

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

Vorheriger Artikel：Was ist Uniapp?Nächster Artikel：Was ist Uniapp?

In Verbindung stehende Artikel

Mehr sehen