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

时间: 2019-02-12阅读: 828标签: 图片

主要利用 form 的 target 属性,在提交表单之后 response 返回到 iframe 中。form 的 action 可以自己写,也可以直接利用 富文本编辑器的接口实现上传

<form id="form_img" method="post" action="/Ueditor/net/controller.ashx?action=uploadimage" enctype="multipart/form-data" target="target_img">
        <div>选择图片封面:</div>
        <input id="img_file" accept="image/*" name="upfile" type="file" />
        <input name="submit" value="上传" type="submit" />
    </form>
    <iframe id="target_img" name="target_img" style="display:none"></iframe>
    <img id="pre_img" src="/Manage/images/no_face.gif" style="width:240px;height:155px" />

    <script>

        $(function ($) {
            var result;
            //这里注意 jquery 的版本
            $("#target_img").load(function () {
            //$("#target_img").on('load', function () {
                result = $(this);
                //console.log(result[0].contentDocument.body.textContent);
                var ans = jsON.parse(result[0].contentDocument.body.textContent);
                if (ans["state"] == "SUCCESS") {
                    alert("上传成功");
                    $("#pre_img").attr("src", "/Uploads/" + ans["url"]);
                    //结果保存在 父窗口的控件中
                    $('#face_img', parent.document).val("/Uploads/" + ans["url"]);
                }
                else {
                    alert("上传失败请重试!");
                }
            });
        });
    </script>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1968

关闭

lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件

当你的网站使用了大量图片时候,如果一次性全部加载,那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题,它可以实现图片的延迟加载【懒加载】

图片格式区别:png8,png24,jpg,jpeg,gif,webp

色彩丰富的、比较大的图片切成jpg格式,例如一些网站的banner图,WEBP因为体积小,正在被大量网站使用。网站加速的内容一半包含了WEBP这种格式,但是写代码必须考虑部分不支持webp,比如苹果系统的Safari浏览器就不支持。

CSS Blur() 将高斯模糊应用于输出图片

blur() CSS 方法将高斯模糊应用于输出图片. 结果为 <filter-function>.radius模糊的半径,值为<length>。 它定义了高斯函数的标准偏差值,即屏幕上有多少像素相互融合; 因此,较大的值会产生更多模糊。 值为0会使输入保持不变。 该值为空则为0。

javascript如何判断图片是否存在?

JavaScript在实际应用中,可能有这样的需求,那就是检测一个图片是否存在。下面我们来看一下JavaScript如何判断图片是否存在。

Js淘宝放大镜实现

这个功能是我在模仿淘宝详情页的时候做出来的;图片的引用是一个大图,一个小图;传输用的ajax,记得改成自己的ip地址,js和html都改一下。制作一个类似于淘宝的放大镜效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题

笔者网站的图片都是上传到第三方网站上的,比如 简书、掘金、七牛云上的,但是最近简书和掘金都开启了 防盗链,防止其他网站访问他们网站上的图片了,导致笔者的网站存在他们网站上的图片全挂了

CSS object-fit 对图片的处理

object-fit:指定可替换元素的内容应如何适应到需使用的高度和宽度确定的框,平时写代码经常会在代码中插入图片,你是否会多少感觉插入的图片被拉伸或是被缩放

在 Chrome 75中将支持图片懒加载

Google 的 Chrome & Web 平台工程经理 Addy Osmani 在个人博客发文,介绍到 <img> 和 <iframe> 的 loading 将新增一个属性:lazy。为延迟加载提取和应用JavaScript库的重要性(对于跨浏览器支持)

js实现图片转base64格式,并压缩上传

需要用户上传身份证,并识别身份证的编号存储在后端,这里要求实现图片上传,并转为base64的格式,传给服务器失败图片的身份证号码。由于很多用户用手机拍摄的照片

webpack 图片路径问题

今天在学 webpack 时碰到一个问题,就是 webpack 通过插件 file-loader 打包图片后,在最终的 html 文件中图片地址是不对的,只有图片名称是对的,相信应该也有很多和我一样的初学者掉坑了。在 webpack.config.js 的配置文件中添加一个属性

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!