js 學習文件上傳畫面顯示問題總結

注：本人使用的是mac 電腦 瀏覽器是 chrome  其他瀏覽器和系統可以嘗試

測試效果 http://127.0.0.1:5000/upTest

後端代碼用python3 app.py實現，只是爲了驗證結果有效，不做過多說明

app.py

from flask import Flask, make_response, jsonify, request
app = Flask(__name__)
from flask import request
import os
import time

#以下用於模版第一次進入

@app.route('/upTest')
def upTest():
    return app.send_static_file('upload.html')

#以下用於文件上傳服務器端結果

@app.route('/uploadfile', methods=["POST"])
def uploadFromFile():
    print('uploadFromFile')
    print('request.method =',request.method)
    if request.method == "POST":
        #顯示獲得的文件
        print('request.files=',request.files)

        '''
        以下代碼結合自己系統要求，可以把文件保存到服務器對應路徑
        uploadImg = request.files["uploadImg"]
        print('uploadImg.filename=', uploadImg.filename)
        tmpPath = os.path.join(
                “./tmp/”,
            uploadImg.filename)
        print('tmpPath=', tmpPath)
        '''
        #uploadImg.save(tmpPath)
        #return 0
        return '<h1>Hello~~~:%s</h1>' % 100

if __name__ == '__main__':
    app.run()

畫面段代碼儘量簡單
upload.html
前提：首先把jquery引入，後邊根據情況用得到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>Title</title>
</head>
<body>

 中間代碼 隨後說明

</body>
</html>

方法一：通過form表單方式提交

以下有兩種方法，分別是ajax 和 XMLHttpRequest 都可以實現

html說明：

定義form id = uploadForm 這個很重要後邊會用到 <form id="uploadForm" enctype="multipart/form-data">

定義input file 元素 name = “uploadImg” 這個很重要與後端app.py接受代碼 request.files["uploadImg"] 對應

定義按鈕 onclick方法

onclick="up_file_XML() 調用XMLHttpRequest的方式
onclick="up_file() 調用ajax的方式

js代碼說明：

up_file：獲得form的第一個對象，這個就是文件

var formData = new FormData($('#uploadForm')[0]);

<div>
    <form id="uploadForm" enctype="multipart/form-data">
        <div>FormToUP:
            <input type="file" name="uploadImg">
            <input type="button" value="上傳" id="upFileBtn" onclick="up_file()">
        </div>
    </form>
</div>
<script type="text/javascript">
    function up_file() {
        var formData = new FormData($('#uploadForm')[0]);
        alert(formData);
        $.ajax({
            url: "/uploadfile",
            type: "POST",
            data: formData,
            async: true,
            cashe: false,
            contentType: false,
            processData: false,
            success: function (returndata) {
                alert(returndata)
            },
            error: function (returndata) {
                alert("上傳失敗！")
            }
        })
    }
    function up_file_XML() {
        var formData = new FormData($('#uploadForm')[0]);
        alert(formData);
        XHR = new XMLHttpRequest();
        XHR.open("POST", "/uploadfile");
        XHR.send(formData);
        alert("上傳成功！")
    }
</script>

方法二：通過input file元素方式提交

這裏也可以用XMLHttpRequest 或者ajax方式，不再重複

file需要設置 id =“file” 作爲唯一標識，提取時要用到

與方法一相比，元素需要提取後單獨，追加到FormData

formData.append('uploadImg', file); 這裏的uploadImg和服務器端對應，要注意

<hr>
FileToUP:
<input type="file" id="file" name="uploadImg"/>
<button onclick="fileSaveToServer()">文件保存到服務器</button>
<script type="text/javascript">
    //var up_file = function () {
    function fileSaveToServer() {
        //通過檢索input中 id=file的元素的數值
        //var file = document.querySelector('input[id=file]').files[0];
        //也可以通過直接元素的ID取得
        var file = document.getElementById('file').files[0];

        var formData = new FormData();
        formData.append('uploadImg', file);

        $.ajax({
            url: "/uploadfile",
            type: "POST",
            data: formData,
            async: true,
            cashe: false,
            contentType: false,
            processData: false,
            success: function (returndata) {
                alert(returndata)
            },
            error: function (returndata) {
                alert("上傳失敗！")
            }
        })
    }
</script>

方法三：把上傳文件顯示到畫面

這裏提前定一個站位符 id="showPage" 如果沒有定義也可以新建一個（自行百度）

然後創建一個新的子元素，就可以顯示了

<hr>
FileToShow&UP:
<input type="file" id="file2" name="uploadImg"/>
<button onclick="showPic();">顯示畫面</button>
<div id="showPage"></div>

<script type="text/javascript">
        // 顯示/圖片
    function showPic(ev) {
        //用來後臺傳送
        file = document.getElementById("file2").files[0];
        //用來畫面顯示 實際上是一個路徑
        filepath = document.getElementById("file2").value;
        alert("filepath="+filepath);
        //用來轉換獲得實際路徑
        filefullpath = window.URL.createObjectURL(file);
        alert("filefullpath="+filefullpath);
        var showImg = document.createElement("img");
        //設置 img 屬性，如 id
        showImg.setAttribute("id", "newImg");
        //設置 img 圖片地址
        showImg.src = filefullpath;
        //插入到設定元素的的子元素
        document.getElementById('showPage').appendChild(showImg);
    }

</script>

這裏面有一個特殊問題

如果沒有以下代碼，路徑會顯示成 filevalue=C:\fakepath\google26.jpg 並且提示錯誤

原因是瀏覽器爲了安全把本地地址轉換了。網上有很多方法

最終發現這個方法最簡單

//用來轉換獲得實際路徑
filefullpath = window.URL.createObjectURL(file);
alert("filefullpath="+filefullpath);

最終畫面

js 學習文件上傳畫面顯示問題總結

windows安裝python關聯dlib，face_recognition

JS畫板圖片上傳到服務器Python

js 學習文件上傳畫面顯示問題總結

windows安裝dlib庫

BAT機器學習開源平臺：PaddlePaddle,Angel,DTPAI

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

js 學習 文件上傳 畫面顯示 問題總結

js 學習文件上傳畫面顯示問題總結