刚开始我认为可以像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. hdu4612 无向图中任意添加一条边后使桥的数量最少 / 无向图缩点+求树的直径

    题意如上,含有重边(重边的话,俩个点就可以构成了边双连通). 先缩点成树,在求数的直径,最远的连起来,剩下边(桥)的自然最少.这里学习了树的直径求法:第一次选任意起点U,进行bfs,到达最远的一个点v ...

  2. Executors

    提供了工厂方法: Factory and utility methods for Executor, ExecutorService, ScheduledExecutorService, Thread ...

  3. 实验三:分别用for,while和do-while循环语句以及递归方法计算n!,并输出算式

    1.for循环语句计算n! 2.while循环语句计算n! 3.do-while语句计算n! 4.递归方法计算n! 5.心得:在此次实验中不知道如何从键盘进行输入,通过百度后找到一种容易理解的输入方法 ...

  4. android 打开浏览器指定网页

    <?xml version="1.0" encoding="utf-8"?> <!-- 定义当前布局的基本LinearLayout --> ...

  5. Tar压缩文件

    [root@test /root]# tar [-zxcvfpP] filename   [root@test /root]# tar -N 'yyyy/mm/dd' /path -zcvf targ ...

  6. 【转】 nginx重定向规则详细介绍

    rewrite命令 nginx的rewrite相当于apache的rewriterule(大多数情况下可以把原有apache的rewrite规则加上引号就可以直接使用),它可以用在server,loc ...

  7. centos 7 安装官方LAMP(Apache+PHP5+MySQL)

    启用Apache2 yum install httpd systemctl start httpd.service systemctl status httpd systemctl enable ht ...

  8. 自动检查出修改的代码 shell 做升级包 供观摩

    #!/bin/bash # 检测出 appsReleass 项目代码更新 # oath 冉幕飞 #验证 基础参数 $1 day=$1 #多少天内 zipfile=$2 #包名称 if [ " ...

  9. 【转载】关于C#静态构造函数的几点说明

    一.定义 静态构造函数是C#的一个新特性,其实好像很少用到.不过当我们想初始化一些静态变量的时候就需要用到它了.这个构造函数是属于类的,而不是属于哪里实例的,就是说这个构造函数只会被执行一次.也就是在 ...

  10. ActiveMQ(六) 转

    package pfs.y2017.m11.mq.activemq.demo07; import org.apache.activemq.ActiveMQConnectionFactory; impo ...