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
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://www.yhys.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
 
<iframe id="upload_target" name="upload_target" src="upload.php" style="width:0;heigth:0;overflow:hidden;border:0;position: absolute; left:-500px;"></iframe>
<img id="tag_img" src="http://www.pangdan.com/images/chunwan.gif" />
<form enctype="multipart/form-data" action="upload.php" method="post" target="upload_target">
    <input type="file" id="fileipt" name="userfile" class="file" value=""  />
    <input type="submit" name="uploadimg" value="上传" id="submit" hidden />
</form>
 
<script type='text/javascript'>
    var lastFileName;
   $("#fileipt").change(function() {
       var fileName = $(this).val();
       var pos = fileName.lastIndexOf("\\");
       fileName = fileName.substr(pos+1, fileName.length);  // 截取出文件名 因为会带路径
       lastFileName = fileName;
       $("#submit").click();
   });
 
    function stopSend($url) {
        $("#tag_img").attr("src",$url);
    }
 
</script>
 
</body>
</html>

upload.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
/**
 * Created by PhpStorm.
 * User: chenxiaolong
 * Date: 7/21/17
 * Time: 10:24
 */
//var_dump($_FILES);
$file=$_FILES['userfile'];
if($file['size'] != 0) {
    $name=rand(0,500000).dechex(rand(0,10000)).".jpg";
    move_uploaded_file($file['tmp_name'],$name);
    if($name) {
        echo "<script>parent.stopSend('$name')</script>";
    }
}

ajax 无刷新上传图片

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<button id="J_headimg" style="font-size: 12px;margin-left: 10px;width: 70px;height: 30px;background: #10AD5A;color: #fff;">修改头像</button>
<input type="file" name="pic" id="pic" hidden accept="image/*" />
<input type="text" id="headimg" name="headimg" hidden>
 
<script>
  $("#J_headimg").click(function() {
    $("#pic").click();
    return false;
  });
  $("#pic").change(function() {
    var $that = $(this);
    var imgPath = $(this).val();
    if (imgPath == "") {
      alert("请选择上传图片！");
      return;
    }
    //判断上传文件的后缀名
    var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
    if (strExtension != 'jpg' && strExtension != 'gif'
            && strExtension != 'png' && strExtension != 'bmp' && strExtension != 'jpeg') {
      alert("请选择图片文件");
      return;
    }
    var formData = new FormData();
    formData.append('file', $that[0].files[0]);// php 用$_FILES['file']接收
    console.log($that[0].files[0]);
    $.ajax({
      type: "POST",
      url: "__URL__/uploadimg",
      data: formData,
      cache: false,
      processData: false,// 需要加这两个参数
      contentType: false,
      success: function(data) {
        var obj = JSON.parse(data);
        if(obj.status == 0) {
          $("#preimg").attr("src","Public/Upload/" + obj.data);
          $("#headimg").val(obj.data);
        } else {
          alert(obj.data);
        }
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("上传失败，请检查网络后重试");
      }
    });
  });
 
</script>

对应uploadimg方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public function uploadimg() {
   $file = $_FILES['file'];
   $arr = array('jpg'=>'image/jpeg','png'=>'image/png','gif'=>'image/gif','bmp'=>'image/bmp');
   if($ext = array_search($file['type'],$arr)) {
      $rand = uniqid();
      $filename = "Public/Upload/avatar/{$rand}.{$ext}";
   } else {
      exit(json_encode(array('status'=>2,'data'=>'只支持图片上传')));
   }
   $r = move_uploaded_file($file['tmp_name'],$filename);
   if($r) {
      exit(json_encode(array('status'=>0,'data'=>"avatar/$rand.$ext")));
   } else {
      exit(json_encode(array('status'=>1,'data'=>'上传失败')));
   }
}

无刷新上传图片，ajax 和 iframe的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  7. 浅谈页面无刷新技术ajax

    现在一般网站都是用ajax来实现页面无刷新操作的. 什么是无刷新:ajax可以实现页面与后台的数据交互,用户完全感觉不出页面有任何的刷新,这就是AJAX的无刷新. ajax方法实现: 可以对ajax进 ...

  8. ajax无刷新上传图片

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

  9. 无刷新删除 Ajax,JQuery

    1.数据库用上面的,增加一个 DeleteById 的SQL方法 delete from T_Posts where Id = @Original_Id 2.设置处理页面 delete.ashx pu ...

随机推荐

  1. mysql远程导出

    D:\phpStudy\PHPTutorial\MySQL\bin>mysqldump -h192.168.1.1 -u用户名 -p密码 --default-character-set=utf8 ...

  2. laravel中用到的ServiceProvide

    路由 全局限制 如果你希望路由参数可以总是遵循正则表达式,则可以使用 pattern 方法.你应该在 RouteServiceProvider 的 boot 方法里定义这些模式: 1 2 3 4 5 ...

  3. 72）PHP，session基本原理和登录验证

    (1) (2)   所以  你要是开了session,那么就会有session数据,但是假如在你的php脚本中没有开放发session,就不会有session数据

  4. EMCCD

    EMCCD 即电子倍增CCD,是探测领域内灵敏度极高的一种高端光电探测产品. 在光子探测领域的应用发展对探测器灵敏度的要求不断提高,EMCCD (Electron-Multiplying CCD)技术 ...

  5. HUPO|PSI|PeptideAtlas|TPP|Partial submission|Complete submission|proteomeXchange

    蛋白质组实验数据提交 需要共享数据,共享要求: 质谱实验数据 HUPO Proteomics Standards Initiative (http://www.psidev.info/overview ...

  6. G1最佳实践

    示例 -Xms1550m -Xmx1550m -XX:+UseG1GC -XX:MaxGCPauseMillis=200 -verbosegc -XX:+PrintGCDateStamps -Xlog ...

  7. 吴裕雄--天生自然python学习笔记：Python3 正则表达式

    Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re 模块使 Python 语言拥有全部的正则表达式功能. compile 函数根据一个模式字符串和可选的标志参 ...

  8. ContentType明细对照表（文件类型相关的设置）

    文件扩展名 Content-Type(Mime-Type) 文件扩展名 Content-Type(Mime-Type) .*( 二进制流,不知道下载文件类型) application/octet-st ...

  9. 转： zabbix3.2.1安装graphtrees插件

    转自 : http://blog.csdn.net/liang_baikai/article/details/53542317 graphtree介绍 由于zabbix的图像显示一块不太友好,图像没法 ...

  10. 将js进行到底：node学习5

    HTTP开发之Connect工具集--中间件 继学习node.js的TCP API和HTTP API之后,node.js web开发进入了正轨,但这就好像Java的servlet一样,我们不可能使用最 ...