关闭

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

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

主要利用 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

关闭

css实现图片剪裁居中_利用css属性object-fit

列表显示图片的时候,一般设置图片宽度自适应,那么高度就会根据图片本身的宽高比等比缩放,怎么才能实现图片居中剪切,避免图片变形呢,css属性object-fit就可以实现

css怎么让背景图片平铺?

平铺选项是在网页设计中能够经常使用到的一个选项,例如网页中常用的渐变式背景。采用传统方式制作渐变式背景,往往需要宽度为背景进行平铺。

h5移动端禁止长按图片保存

在移动端访问H5页面的时候,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们需要长按的时候也不保存图片。那该如何实现呢?下面给出3种解决方案。使用 pointer-events:none、全局属性、加一层遮罩层

javascript如何实现图片隐藏?

javascript中可以通过将图片display属性设置为none实现图片隐藏。display属性设置元素如何显示,其语法为Object.style.display=value。

nodejs实现二维码生成及图片合成

前端需要做分享功能。生成二维码后 在指定的图片上添加二维码和邀请码生成新的图片。1.使用 qr-code生成二维码;2.使用 text-to-svg 生成邀请码图片,字符转图片;3.使用gm工具合成图片

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

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

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

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

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

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

浅探前端图片优化

性能优化是前端开发必不可少的一环,而图片优化又是性能优化中必不可少的一环,但不知道有多少开发者在网页的开发过程中会注意图片的使用,图片使用不当可能会导致网页加载卡顿、网页加载速度慢等问题,这篇文章将会将我以往对图片的处理做个总结

前端开发中对图片的优化技巧有哪些?

除了内容图片,其他的图片的作用是修饰,也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片!所以在优化之前要做的,首先是确认设计,设计本身是否需要用那么多图片?还是说可以更简洁?

点击更多...

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