<!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. Java的常量和变量

    一.标识符 如类名,数字不能作为标识符的首字母(以字母或者下划线或者$开头且不能有空格) 注意和Python的区别,Python中标识符由字母.下划线和数字组成,且数字不能开头,也是严格区分大小写(但 ...

  2. 启动django时报错Watching for file changes with StatReloader(使用状态加载程序监视文件更改 )

    原因:可能是Django版本和Python版本或者PyMysql版本不一致 解决:升级或者降级Django版本 命令如下: pip install django==2.1.7 #django==版本号 ...

  3. ionic3隐藏子页面的tabs和配置返回按钮

    在app.modlues.ts文件中修改 imports: [ BrowserModule, IonicModule.forRoot(MyApp, { tabsHideOnSubPages: 'tru ...

  4. spring整合junit进行测试

    以下只是一个模板,大家记得改变配置文件 package cn.itcast.crm.dao; import org.junit.Test; import org.junit.runner.RunWit ...

  5. postgresql数据库中~和like和ilike的区别

     ~(暂且叫他波浪号吧) 和 LIKE 和 ILIKE 操作符可以模糊匹配字符串,LIKE是一般用法,ILIKE匹配时则不区分字符串的大小写,~ 波浪号则可以使用正则匹配. LIKE和 ILIKE 它 ...

  6. nginx springboot配置

    1.下载安装nginx 2.nginx.conf文件修改参数 上方是代理后的端口,代理的server.下方是需要代理的路径 3.windows 下操作指令 启动 直接点击Nginx目录下的nginx. ...

  7. GWAS:拒绝假阳性之case和control数量比例严重失衡的解决方案(SAIGE模型的应用)

    一.为什么要校正case和control数量比例不平衡情况 试问作为生信届人员,最怕的是什么,当然是统计结果不靠谱.统计结果不靠谱包括两方面:一个是假阴性,一个是假阳性.假阴性可以理解为白天鹅被误当成 ...

  8. mysql 数据库学习笔记一

    一.navicat的引入: (第三方可视化的客户端,方便MySQL数据库的管理和维护)安装网址:https://www.navicat.com.cn/ NavicatTM是一套快速.可靠并价格相宜的数 ...

  9. STL初始化initializer_list

    #include <iostream> #include <stdio.h> #include <stdlib.h> #include <string.h&g ...

  10. 分析web.xml

    <?xml version="1.0" encoding="UTF-8"?>  //xml的版本:1.0 和 编码:utf-8 <web-ap ...