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

最新推荐文章于 2021-08-06 11:00:36 发布

原创最新推荐文章于 2021-08-06 11:00:36 发布 · 644 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#file #提交

图像处理专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种通过表单提交图片并使用iframe接收后端响应的实现方式。具体包括前端如何设置表单提交图片，后端如何处理图片上传请求及返回结果，并详细解释了如何通过定时器检查iframe中的返回状态来判断图片上传是否成功。

 <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);