from(file)用于提交后返回后端执行后的状态(这里是图片的例子)

 <form id="upload_img" method="post" enctype="multipart/form-data" target="upload">
     <div style="position:relative;float:left;"> 
         <input accept="image/gif,image/jpeg,image/x-png" style="opacity:0;width: 258px;height: 28px;" type="file" name="file" onchange="upload_img_by_handle_file_name(this);">
        <div style="height: 28px;margin-top: -28px;">
            <input type="text" class="input-fat" placeholder="请上传图片" style="width:170px;">
            <a href="javascript:void(0);" class="sui-btn btn-large">浏览..</a>
            <input type="hidden" name="seller_nick">
            <input type="hidden" name="return_url">
        </div>
    </div>
 </form>

 <iframe name="upload" style="display:none;"></iframe>

 function upload_img_by_handle_file_name(element) {
     $(element).next().find(":text").val($(element).val().substring($(element).val().lastIndexOf("\\") + 1));
 }

当from提交至后端 响应有iframe接收 (target=”upload”)

后端处理后将接收的return_url参数拼成 (return_url+”?status=success”) 跳转到return_url拼成后的地址

这是 iframe 接收的后端处理后的return_url地址和参数状态(这里涉及到跨域的问题,所以需要前端传回一个url确保在同域下)

function GetRequest(url) {
    //var url = location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}


var ts = setInterval(function () {
        try {
            var search = window.upload.location.search;
            var request = new Object();
            if (search != "") {
                clearInterval(ts);
                if (search.indexOf("status=success") > 0) {
                    var par = new Object();
                    par = GetRequest(window.upload.location.search);
                    console.log(par);
                    window.upload.location.search = "";
                }
                else {
                    console.log("上传失败");
                    window.upload.location.search = "";
                }
            }
        } catch (e) {
            console.log(e);
            clearInterval(ts);
            window.upload.location.search = "";
            console.log("上传失败");
        }
    }, 500);

这里利用定时器取iframe的location根据取得的search就可知道返回的状态

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上传大文件并查询进度</title> </head> <body> <input type="file" id="fileInput"> <button id="uploadBtn">上传</button> <div id="progressBar"></div> <script> // 上传文件 function uploadFile(file) { const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); const formData = new FormData(); formData.append('file', file); xhr.upload.addEventListener('progress', (event) => { if (event.lengthComputable) { const progress = event.loaded / event.total * 100; updateProgress(progress); } }); xhr.send(formData); } // 更新进度条 function updateProgress(progress) { const progressBar = document.getElementById('progressBar'); progressBar.style.width = `${progress}%`; progressBar.innerText = `${progress.toFixed(2)}%`; } // 上传按钮点击事件 const uploadBtn = document.getElementById('uploadBtn'); uploadBtn.addEventListener('click', () => { const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; if (file) { uploadFile(file); } }); </script> </body> </html> ``` 后端代码: ```python from flask import Flask, request app = Flask(__name__) @app.route('/upload', methods=['POST']) def upload(): file = request.files['file'] file_size = request.content_length uploaded_size = 0 with open('/path/to/save/file', 'wb') as f: while True: chunk = file.read(1024 * 1024) # 每次读取1MB if not chunk: break f.write(chunk) uploaded_size += len(chunk) progress = uploaded_size / file_size * 100 yield f"data:{progress}\n\n" # 返回进度信息 return '上传完成' if __name__ == '__main__': app.run() ``` 在这个例子中,前端通过XMLHttpRequest发送POST请求上传文件,同时监听XMLHttpRequest.upload对象的progress事件获取上传进度,并将进度显示在页面上的进度条中。 后端使用Flask框架接收上传文件,并在写入文件的过程中,使用Python的生成器函数来实时返回上传进度信息。Flask会将生成器函数的返回值当作响应的内容返回给客户端,这样前端就能够实时获取到上传进度信息,并更新进度条的显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值