<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="/static/jquery-1.12.4.js"></script>

<h3>4.文件上传</h3>

    <input type="file" id="img" />
    <div id="container"></div>
    <a class="btn" onclick="AjaxSubmit6()">上传</a>

<script>
function AjaxSubmit6() {
            //document.getElementById('img')[0]
            var data = new FormData();
            console.log(data)
            data.append('k1','v1');
            data.append('k2','v2');
            data.append('k3',document.getElementById('img').files[0]);
            console.log(data)

            $.ajax({
                url: '/fakeajax',
                type: 'POST',
                data:data,
                success:function (arg) {
                    var ele=document.createElement('img')
                    ele.src='/'+arg.url
                    document.getElementById('container').appendChild(ele)
                },
                 processData: false,  // tell jQuery not to process the data
                 contentType: false  // tell jQuery not to set contentType

            })
        }

</script>

</body>
</html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .btn{

            display: inline-block;

            padding: 5px 10px;

            background-color: coral;

            color: white;

        }

    </style>

</head>

<body>

    <iframe style="display: none" id="iframe1" name="ifra1"></iframe>

    <form id="fm1" action="/fakeajax" method="POST" enctype="multipart/form-data" target="ifra1">

        <input type="file" name="k3" onchange="uploadFile();" />

    </form>

    <h3>预览</h3>

    <div id="preview">

    </div>

    <script src="/static/jquery-1.12.4.js"></script>

    <script>

        function uploadFile() {

            document.getElementById('iframe1').onload = reloadIframe1;

            document.getElementById('fm1').submit();

        }

        function reloadIframe1() {

            var content = this.contentWindow.document.body.innerHTML;

            var obj = JSON.parse(content);

            var tag = document.createElement('img');

            tag.src = obj.url;

            $('#preview').empty().append(tag);

        }

    </script>

</body>

</html>

iframe+form 上传预览

jquery +ajax 上传加预览的更多相关文章

  1. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  2. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  3. 基于HTML5和JSP实现的图片Ajax上传和预览

    本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...

  4. jquery 图片上传本地预览V1.2

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 代码进行小小的压缩 如果看源码 自己解压就行了 版本已升级  修复jquery版本问题  支持任意jqu ...

  5. C# MVC（File）控件多张图片上传加预览

    刚来公司实习,老板叫我写一个积分商城网站.用的是公司的框架结构搭建的后台,所以后台的图片上传不需要自己写.但是前台的评价图片就需要自己手写了,在网上找了很多代码发现都用不了.问了很多人也都没有实现! ...

  6. 基于HTML5多图片Ajax上传可预览

    html5多图控件<input id="fileImage" type="file" size="30" name="fil ...

  7. ThinkPHP5+Layui实现图片上传加预览

    html代码 <div class="layui-upload"> <button type="button" class="lay ...

  8. jquery图片上传前预览剪裁

    http://www.webmotionuk.co.uk/jquery/image_upload_crop.php http://keleyi.com/a/bjad/liuvpkke.htm 不错的d ...

  9. jQuery+Ajax实现图片的预览和上传

    jQuery+Ajax实现图片的预览和上传 1.配置Spring-web.xml <!-- springmvc上传图片 --> <bean id="multipartRes ...

随机推荐

  1. 关闭浏览器事件 onbeforeunload和onunload

    在做毕设的时候,需要在关闭浏览器的时候向后台服务器修改用户在线状态.首先讲一下 onbeforeunload 和 onunload(都是在刷新或关闭时调用) 的区别: (1)onbeforeunloa ...

  2. BZOJ 2594 水管局长数据加强版

    LCT维护最小生成树 要求两点路径最大的最小,首先想到的肯定是最小生成树,再加上有删边操作,那就得用LCT维护了. 可是对于cut一条边,我们要时刻维护图中的最小生成树,需要把之前被我们淘汰的边找回, ...

  3. python并发编程之协程知识点

    由线程遗留下的问题:GIL导致多个线程不能真正的并行,CPython中多个线程不能并行 单线程实现并发:切换+保存状态 第一种方法:使用yield,yield可以保存状态.yield的状态保存与操作系 ...

  4. jmeter笔记（6）--参数化--函数助手

    函数助手提供的功能很多,本次笔记主要整理_CSVRead 函数._Random函数以及_RandomString函数的基础使用方法 1._CSVRead 作用:直接读取csv文件的值生成函数 1.在[ ...

  5. GraphQL

    GraphQL 官方描述: GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时. GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地 ...

  6. 不用代码就能实现get与post

    这些天在测试各种API,每次都敲代码实现,就显得有点浪费时间了 为了节约时间,提高效率,我想着收集一些可以只用 -命令行- 或者是 -浏览器- 就能够实现的技巧 在这里,我简单测试三种工具来实现 ge ...

  7. P1996 约瑟夫问题-题解（队列？？明明是单循环链好吗）

    一如既往的题目传送:     https://www.luogu.org/problemnew/show/P1996 这里不讲数组模拟的方法(毕竟多做点题的模拟功力足以暴力出这道题),而是讲一种单循环 ...

  8. 多输入select

    目录 多输入select IO模型 select介绍 小demo 注意 引入电子书 title: 多输入select date: 2019/3/20 17:21:34 toc: true --- 多输 ...

  9. JMeter二次开发环境配置

    本文主要介绍如何在Eclipse中配置JMeter开发环境. 一.下载JMeter源码 1.在JMeter官网下载二进制包和源码包: 解压备用: 二进制解压后文件夹名称为“jmeter_release ...

  10. HDU 2594(求最长公共前后缀 kmp)

    题意是在所给的两个字符串中找最长的公共前后缀,即第一个字符串前缀和第二个字符串后缀的最长相等串. 思路是将两个字符串拼接在一起,然后直接套用 kmp 算法即可. 要注意用 next 会报编译错误,改成 ...