js 学习文件上传画面显示问题总结

最新推荐文章于 2023-07-25 11:24:47 发布

ChinaAI小童鞋

最新推荐文章于 2023-07-25 11:24:47 发布

阅读量298

点赞数

分类专栏： python mac工具 js

本文链接：https://blog.csdn.net/weixin_41679938/article/details/89351322

版权

python 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

mac工具

9 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

注：本人使用的是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);

最终画面

ChinaAI小童鞋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 学习文件上传画面显示问题总结

注：本人使用的是mac 电脑浏览器是 chrome 其他浏览器和系统可以尝试测试效果 http://127.0.0.1:5000/upTest后端代码用python3 app.py实现，只是为了验证结果有效，不做过多说明app.pyfrom flask import Flask, make_response, jsonify, requestapp = Flask(__...
复制链接

扫一扫