jquery +ajax 上传加预览

<!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" οnclick="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>
<htmllang="en">
<head><metacharset="UTF-8"><title>Title</title><style>.btn{display:inline-block;padding:5px 10px;background-color:coral;color:white;}</style>
</head>
<body><iframestyle="display: none"id="iframe1"name="ifra1"></iframe><formid="fm1"action="/fakeajax"method="POST"enctype="multipart/form-data"target="ifra1"><inputtype="file"name="k3"onchange="uploadFile();" /></form><h3>预览</h3><divid="preview"></div><scriptsrc="/static/jquery-1.12.4.js"></script><script>functionuploadFile() {document.getElementById('iframe1').onload=reloadIframe1;document.getElementById('fm1').submit();}functionreloadIframe1() {varcontent= this.contentWindow.document.body.innerHTML;varobj=JSON.parse(content);vartag=document.createElement('img');tag.src=obj.url;$('#preview').empty().append(tag);}</script>
</body>
</html>

iframe+form 上传预览

转载于:https://www.cnblogs.com/wangtc/p/10782659.html

jquery +ajax 上传加预览相关推荐

ajax js图片上传到php,Ajax上传并预览图片（附代码）
这次给大家带来Ajax上传并预览图片(附代码),Ajax上传并预览图片的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 直接上最简单的一种 ajax 异步上传图片,并预览 html: 图片上 ...
layui上传图片列表展示_ThinkPHP5+Layui实现图片上传加预览功能
html代码上传封面 js代码 var uploadInst = upload.render({ elem:'#cover' ,url:'addCourse' ,accept:'file' // 允 ...
js ajax上传文件到服务器,使用ajax上传并预览图片后传到服务器上
利用js的FormData对象快速收集表单信息及无刷新上传头像 #preview, .img, img { width: 200px; height: 200px; } #preview { bord ...
php+jquery实现图片上传预览_和拖动位置值,PHP教程：thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...
ajax上传图片并显示,Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
html ajax 图片上传,Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...
jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档
jQuery图片批量上传插件源码,支持批量上传.预览.删除.放大,可配置上传数量.上传大小.追加方式,含详细使用文档程序包内含使用Demo 完整程序源代码:jQuery图片批量上传插件源码上传前 ...
XX健康:预约管理-套餐管理图片上传与预览Redis实现定时清理垃圾图片
1. 新增套餐 1.1 需求分析套餐其实就是检查组的集合,例如有一个套餐为"入职体检套餐",这个体检套餐可以包括多个检查组:一般检查.血常规.尿常规.肝功三项等.所以在添加套餐时 ...

jquery +ajax 上传加预览

jquery +ajax 上传加预览相关推荐

最新文章

热门文章