<!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. 通过后缀名和MIME-TYPE检查实现文件类型校验

    前言 文件上传是一个在开发中很常见的需求场景,通常出于安全考虑,我们会对上传的文件进行类型校验,其中常见的有后缀名校验,mime-type校验 话不多说,直接上代码 1.首先定义允许上传的文件类型白名 ...

  2. java核心卷笔记--P48字符串3.6.5

    一定不要使用 == 运算符检测两个字符串是否相等 ! 这个运算符只能够确定两个字串是否放置在同一个位置上 . 当然 , 如果字符串放置在同一个位置上 , 它们必然相等. 但是 ,完全有可能将内容相同的 ...

  3. 关于String的一些基础小题目

    需求一:从键盘输入一串字符串,统计数字,字母,空格,其它字符的个数 import java.util.Scanner; public class Q1 { public static void mai ...

  4. 快速沃尔什变换(FWT)及K进制异或卷积&快速子集变换(FST)讲解

    前言: $FWT$是用来处理位运算(异或.与.或)卷积的一种变换.位运算卷积是什么?形如$f[i]=\sum\limits_{j\oplus k==i}^{ }g[j]*h[k]$的卷积形式(其中$\ ...

  5. 「洛谷3870」「TJOI2009」开关【线段树】

    题目链接 [洛谷] 题解 来做一下水题来掩饰ZJOI2019考炸的心情QwQ. 很明显可以线段树. 维护两个值,\(Lazy\)懒标记表示当前区间是否需要翻转,\(s\)表示区间还有多少灯是亮着的. ...

  6. 洛谷P5289 [十二省联考2019]皮配（01背包）

    啊啊啊边界判错了搞死我了QAQ 这题是一个想起来很休闲写起来很恶心的背包 对于\(k=0\)的情况,可以发现选阵营和选派系是独立的,对选城市选阵营和学校选派系分别跑一遍01背包就行了 对于\(k> ...

  7. 快速理解js中的call，apply的作用

    今天被人问到js中的call,apply的区别和用途,解释了一番后,想到之前在逼乎上看到一位小伙伴生动形象的解释 本身不难理解,看下MDN就知道了,但是不常用,遇到了,还要脑回路回转下.或者时间长了, ...

  8. 码云报错：fatal: remote origin already exists.解决方法

    今天在提交Git的时候,遇到了几个问题,记录一下,方便以后查找O(∩_∩)O 第一个问题 git remote add origin************** fatal: remote origi ...

  9. Python 下划线

    单下划线 "单下划线" 开始的成员变量叫做保护变量,意思是只有类对象和自类对象自己能访问到这些变量. 例子:以单下划线开头(_foo)的代表不能直接访问的类属性,需通过类提供的接口 ...

  10. JavaEE三大框架整合

    搭建项目: 搭建一个实际的项目,为了避免影响到你之前已经搭建过的项目,可以先新建一个工作空间,指定一个新的空间来做这一次的项目,不会和其他的项目冲突,尤其是在编码这一部分. 指定新工作空间的目录: 一 ...