使用 form 和 iframe 实现图片上传回显

Posted 2021-02-08 tianyusu

主要利用 form 的 target 属性，在提交表单之后 response 返回到 iframe 中

form 的 action 可以自己写，也可以直接利用 富文本编辑器的接口实现上传

 1 <form id="form_img" method="post" action="/Ueditor/net/controller.ashx?action=uploadimage" enctype="multipart/form-data" target="target_img">
 2         <div>选择图片封面：</div>
 3         <input id="img_file" accept="image/*" name="upfile" type="file" />
 4         <input name="submit" value="上传" type="submit" />
 5     </form>
 6     <iframe id="target_img" name="target_img" style="display:none"></iframe>
 7     <img id="pre_img" src="/Manage/images/no_face.gif" style="width:240px;height:155px" />
 8 
 9     <script>
10 
11         $(function ($) {
12             var result;
13             //这里注意 jquery 的版本
14             $("#target_img").load(function () {
15             //$("#target_img").on(‘load‘, function () {
16                 result = $(this);
17                 //console.log(result[0].contentDocument.body.textContent);
18                 var ans = JSON.parse(result[0].contentDocument.body.textContent);
19                 if (ans["state"] == "SUCCESS") {
20                     alert("上传成功");
21                     $("#pre_img").attr("src", "/Uploads/" + ans["url"]);
22                     //结果保存在 父窗口的控件中
23                     $(‘#face_img‘, parent.document).val("/Uploads/" + ans["url"]);
24                 }
25                 else {
26                     alert("上传失败请重试！");
27                 }
28             });
29         });
30     </script>