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 '
Hello~~~:%s
' % 100

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

画面段代码尽量简单
upload.html
前提：首先把jquery引入，后边根据情况用得到

    
    
    



 中间代码 随后说明

方法一：通过form表单方式提交

以下有两种方法，分别是ajax  和 XMLHttpRequest 都可以实现

html说明：

定义form id = uploadForm 这个很重要 后边会用到

定义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]);

    
        
FormToUP:
            
            
        
    

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

这里也可以用XMLHttpRequest 或者ajax方式，不再重复

file需要设置 id =“file”  作为唯一标识，提取时要用到

与方法一相比，元素需要提取后单独，追加到FormData

formData.append('uploadImg', file); 这里的uploadImg和服务器端对应，要注意

FileToUP:

文件保存到服务器

方法三：把上传文件显示到画面

这里提前定一个站位符  id="showPage" 如果没有定义也可以新建一个（自行百度）

然后创建一个新的子元素，就可以显示了

FileToShow&UP:

显示画面

这里面有一个特殊问题

如果没有以下代码，路径会显示成  filevalue=C:\fakepath\google26.jpg  并且提示错误

原因是浏览器为了安全把本地地址转换了。网上有很多方法

最终发现这个方法最简单

//用来转换获得实际路径
filefullpath = window.URL.createObjectURL(file);
alert("filefullpath="+filefullpath);

 

最终画面