javascript 无刷新上传图片之原理
刚开始我认为可以像ajax 那样获取到数据然后通过ajax 发送请求,后来发现浏览器为了客户端的安全默认并没有给javascript 这个权限。这个方法当然是行不同了。我看了好像开源的上传图片原理,当然大部分是flash。但是为了方便使用js的也不少。
原理都是使用iframe 上传,在from标签里面有个属性 和a 标签一样 target,target标示这个表单的数据提交的目的地。网页特效代码target里面写iframe的name ,这样表单的数据就提交到了这个 iframe里面。
根据这个原理实现方法:
通过 javascript动态的创建一个 form 和一个 iframe,来上传图片。
如我在易U里面写的规则是,在一个表单里面的按钮加上 fname 这样一个属性 就会在这里创建一个自动上传
如:
<form>
<input fanme="imgname" type="button" value="请选择图片">
</form>
当点击这个按钮时其实是点击的上传框,所有就会弹出选择文件,当用户选择了文件立即上传用javascript 动态获取 iframe的返回内容,这样图片就上传成功了。
1. [代码][HTML]代码
<!--
易U:http://www.yxsss.com/ui/
-->
<form action="" method="get">
<input type="button" fname="uimg" funstr="function(){document.title='图片正在上传……';}" funbak="ddd" furl="a.php" value="本地上传">
</form>http://www.huiyi8.com/jiaoben/
<script type="text/javascript">
function ddd(da){
if(da.ztai){
document.title='上传完成';
ui.success('上传成功保存地址为'+da.url);
}
}
</script>
javascript 无刷新上传图片之原理的更多相关文章
- Thinkphp框架 -- ajax无刷新上传图片
用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...
- ajaxFileUpload.js 无刷新上传图片,支持多个参数同时上传,支持 ie6-ie10
/* 131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10 依赖:jquery-1.6.1.min.js 主方法:ajaxFileUpl ...
- TP3.2:实现Ajax无刷新上传图片
1.基于TP3.2+ajaxfileupload进行无刷新上传图片,本次只上传一张,多张以后搞出来再发 2.效果: 3.html代码: <html> <head> < ...
- 无刷新上传图片,ajax 和 iframe
iframe 上传 upload.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...
- nodejs利用ajax实现网页无刷新上传图片
nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...
- php无刷新上传图片和文件
核心思想:通过Html的iframe标签属性操作顶级窗口,再用php动态无刷新上传图片文件. 示例如下: demo |------uploads #存放上传的文件 |------index.php | ...
- 使用SWFUpload无刷新上传图片
使用SWFUpload组件无刷新上传图片 在做项目时,需要用到一个图片的无刷新上传,之前听说过SWFUpload,于是想要通过SWFUpload来进行图片的无刷新上传,由于我的项目属于是ASP.NET ...
- ajax无刷新上传图片
页面: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...
- js无刷新上传图片,服务端有生成缩略图,剪切图片,iphone图片旋转判断功能
html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" me ...
随机推荐
- 【Tomcat】使用tomcat manager 管理和部署项目,本地部署项目到服务器
在部署tomcat项目的时候,除了把war文件直接拷贝到tomcat的webapp目录下,还有一种方法可以浏览器中管理和部署项目,那就是使用tomcat manager. 默认情况下,tomcat m ...
- 系统进程的Watchdog
编写者:李文栋 /rayleeya http://rayleeya.iteye.com/blog/1963408 3.1 Watchdog简介 对于像笔者这样没玩过硬件的纯软程序员来说,第一次看到这个 ...
- 531. Lonely Pixel I
Given a picture consisting of black and white pixels, find the number of black lonely pixels. The pi ...
- ZOJ 3717 二分+2-sat判定。
好久没有2-sat了,此题当复习之用,二分求最大值+2-sat判断可行,此题主要跪于题意:The results should be rounded to three decimal places. ...
- 洛谷——P1560 [USACO5.2]蜗牛的旅行Snail Trails
P1560 [USACO5.2]蜗牛的旅行Snail Trails 题目描述 萨丽·斯内尔(Sally Snail,蜗牛)喜欢在N x N 的棋盘上闲逛(1 < n <= 120). 她总 ...
- 洛谷—— P3375 【模板】KMP字符串匹配
P3375 [模板]KMP字符串匹配 题目描述 如题,给出两个字符串s1和s2,其中s2为s1的子串,求出s2在s1中所有出现的位置. 为了减少骗分的情况,接下来还要输出子串的前缀数组next. (如 ...
- 洛谷 P2831 愤怒的小鸟
P2831 愤怒的小鸟 题目描述 Kiana 最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上进行的. 有一架弹弓位于 (0,0)(0,0) 处,每次 Kiana 可以用它向第一象 ...
- 用JS过滤Emoji表情的输入
本文为原创,转载请注明出处: cnzt 文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6773854.html 在前端页面开发过程中,总会碰到不允许 ...
- ASP.NET Core默认注入方式下如何注入多个实现(多种方式) - sky 胡萝卜星星 - CSDN博客
原文:ASP.NET Core默认注入方式下如何注入多个实现(多种方式) - sky 胡萝卜星星 - CSDN博客 版权声明:本文为starfd原创文章,转载请标明出处. https://blog.c ...
- Chrome/谷歌开发者工具分析
Chrome/谷歌开发者工具还是要好好掌握一下,对于前端开发超级有用:https://developers.google.com/web/tools/chrome-devtools/ 1.js内存使用 ...