刚开始我认为可以像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 无刷新上传图片之原理的更多相关文章

  1. Thinkphp框架 -- ajax无刷新上传图片

    用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...

  2. ajaxFileUpload.js 无刷新上传图片,支持多个参数同时上传,支持 ie6-ie10

    /* 131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10 依赖:jquery-1.6.1.min.js 主方法:ajaxFileUpl ...

  3. TP3.2:实现Ajax无刷新上传图片

    1.基于TP3.2+ajaxfileupload进行无刷新上传图片,本次只上传一张,多张以后搞出来再发 2.效果:   3.html代码: <html> <head> < ...

  4. 无刷新上传图片,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 ...

  5. nodejs利用ajax实现网页无刷新上传图片

    nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...

  6. php无刷新上传图片和文件

    核心思想:通过Html的iframe标签属性操作顶级窗口,再用php动态无刷新上传图片文件. 示例如下: demo |------uploads #存放上传的文件 |------index.php | ...

  7. 使用SWFUpload无刷新上传图片

    使用SWFUpload组件无刷新上传图片 在做项目时,需要用到一个图片的无刷新上传,之前听说过SWFUpload,于是想要通过SWFUpload来进行图片的无刷新上传,由于我的项目属于是ASP.NET ...

  8. ajax无刷新上传图片

    页面: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...

  9. js无刷新上传图片,服务端有生成缩略图,剪切图片,iphone图片旋转判断功能

    html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" me ...

随机推荐

  1. 洛谷 [P3834] 可持久化线段树(主席树)

    主席树可以存储线段树的历史状态,空间消耗很大,一般开45n即可 #include <iostream> #include <cstdio> #include <cstri ...

  2. Log4j2同步异步性能比较以及教程和问题(坑)汇总

    线程数:500个   每个线程日志输出次数: 500次 log4j2其实有两个输出异步日志的方式:AsyncLogger和AsyncAppend 他两的区别在于: AsyncLogger使用的是无锁高 ...

  3. Codevs 1026 逃跑的拉尔夫

     时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 年轻的拉尔夫开玩笑地从一个小镇上偷走了一辆车,但他没想到的是那辆车属于警察局,并且 ...

  4. 计算机windows7连接打印机

    计算机连接打印机 (1)查看打印机的名字. 示例,打印机名为 HP LaserJet M1522 .... (2)打开windows开始菜单,点击[设备和打印机],然后查看打印机和传真那个区域是否有打 ...

  5. HDU 5667 Sequence【矩阵快速幂+费马小定理】

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5667 题意: Lcomyn 是个很厉害的选手,除了喜欢写17kb+的代码题,偶尔还会写数学题.他找到 ...

  6. R12: How to add Microsoft Excel as Type to the Create Template List of Values in BI Publisher (Doc ID 1343225.1)

    Modified: 27-Oct-2013 Type: HOWTO In this Document Goal Solution References APPLIES TO: BI Publisher ...

  7. android 获得系统时间

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  8. SSH login without password

    SSH login without password Your aim You want to use Linux and OpenSSH to automize your tasks. Theref ...

  9. vim中末行去掉^M

    在Ubuntu系统中打开文件,发现文件中每一个末行都有^M,我们要做的是知道这一个无关的字符是什么作用,然后删除掉这一个无关的字符. 工具/原料   ubuntu操作系统 Vim编辑器 方法/步骤   ...

  10. codeforces 553 A Kyoya and Colored Balls

    这个题.比赛的时候一直在往dp的方向想,可是总有一个组合数学的部分没办法求, 纯粹组合数学撸,也想不到办法-- 事实上,非常显然.. 从后往前推,把第k种颜色放在最后一个,剩下的k球.还有C(剩余的位 ...