-
php 异步上传图片几种方法总结
要实现异步上传图片方法有常用的有二种,一种是利用iframe实现,另一种是借助于ajax来实现一般用第三方插件了,上传图片form提交target到一个隐藏的iframe里,代码如下 :
- form action="upload.php" id="form1" name="form1" enctype="multipart/form-data" method="post" target="uploadIframe">
- <!--上传图片页面 -->
- </form>
- <iframe name="uploadIframe" id="uploadIframe" style="display:none"></iframe>
然后后台处理完上传图片逻辑后返回给前台,利用ajax修改当前页面DOM对象实现无刷新上传图片的友好功能,实例代码如下:a.html
- <form enctype="multipart/form-data" action="a.php" target="ifram_sign" method="POST">
- <input name="submit" id="submit" value="" type="hidden">
- <label>上传文件: <input name="test_file" type="file" id="test_file" size="48"></label>
- <input type="image" value="立即上传" id="submit_btn">
- </form>
- <iframe name="ifram_sign" src="" frameborder="0" height="0" width="0" marginheight="0" marginwidth="0"></iframe>
PHP代码如下:
- <?php
- if ($_FILES["test_file"]["error"] > 0)
- {
- echo "Error: " . $_FILES["test_file"]["error"] . "<br />";
- }//开源代码phpfensi.com
- else
- {
- //这里的判断图片属性的方法就不写了。自己扩展一下。
- $filetype=strrchr($_FILES["test_file"]["name"],".");
- $filetype=substr($filetype,1,strlen($filetype));
- $filename="img/".time("YmdHis").".".$filetype;
- move_uploaded_file($_FILES["test_file"]["tmp_name"],$filename);
- echo '<script >alert(1)</script>';
- $return="parent.document.getElementByIdx_x('mpic".$pageset_id."').innerHTML='".$dataimgpath."'";
- echo "<script >alert('上传成功')</script>";
- echo "<script>{$return}</script>";
- }
- ?>
其实jquery ajax图片异步上传,HTML:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
- <head>
- <title>图片异步上传</title>
- </head>
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript" src="js/index.js"></script>
- <link type="text/css" rel="stylesheet" href="css/index.css">
- <body>
- <div class="frm">
- <form name="uploadFrom" id="uploadFrom" action="upload.php" method="post" target="tarframe" enctype="multipart/form-data">
- <input type="file" id="upload_file" name="upfile">
- </form>
- <iframe src="" width="0" height="0" style="display:none;" name="tarframe"></iframe>
- </div>
- <div id="msg">
- </div>
- </body>
- </html>
index.js,代码如下:
- $(function(){
- $("#upload_file").change(function(){
- $("#uploadFrom").submit();
- });
- });
- function stopSend(str){
- var im="<img src='upload/images/"+str+"'>";
- $("#msg").append(im);
- }
upload.php
- <?php
- $file=$_FILES['upfile'];
- $name=rand(0,500000).dechex(rand(0,10000)).".jpg";
- move_uploaded_file($file['tmp_name'],"upload/images/".$name);
- //调用iframe父窗口的js 函数
- echo "<script>parent.stopSend('$name')</script>";
- ?>
出处:http://www.phpfensi.com/php/20140828/4960.html
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
SQL SERVER中递归
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
这是目前我见过最好的跨域解决方案!
减少回流与重绘
减少回流与重绘
如何使用KrpanoToolJS在浏览器切图
performance.now() 与 Date.now() 对比
一款纯 JS 实现的轻量化图片编辑器
关于开发 VS Code 插件遇到的 workbench.scm.
前端设计模式——观察者模式
前端设计模式——中介者模式
创建型-原型模式