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>
最新文章
- 编写轻量ajax组件03-实现(附源码)
- 谢欣伦 - OpenDev原创教程 - 无连接套接字类CxUdpSocket
- url的路径设置问题
- [转载]如何查看某个查询使用了多少TempDB空间
- C#操作Office- Cannot find the interop type that matches the embedded interop type &#39;Microsoft.Office.Interop.Excel.Application&#39;
- sql server 查找指定字符串的位置
- javascript高级知识点——临时作用域
- [非技术参考]C#基础:使用Thread创建线程(1)
- Telephone Lines USACO 月赛
- 使用angular4搭建博客(一)
- 微信小程序支付及退款流程详解
- LNMP下FTP服务器的安装和使用(Pureftpd和Proftpd)
- PCI9054 学习小结
- HTTP中GET和POST的区别主要是那些,面试中可以加分的该说那些?
- Java内存泄漏定位
- WIN10下VS CODE 更新后拓展宿主意外终止问题解决方法(每次系统更新都要删除一次git)
- 64位Windows的Dos中取消了edit命令
- [LeetCode] 116&;117. Populating Next Right Pointers in Each Node I&;II_Medium tag: BFS(Dont know why leetcode tag it as DFS...)
- 解决Qt Creator编译输出窗口乱码的问题
- zoc 下载服务器上数据出现的问题