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. Android下的鉴权实现方案

    软件原理 不赘述,参考: 软件License认证方案的设计思路 License文件离线鉴权 机械指纹,不可逆的加密算法,如MD5 功能鉴权,可逆的不对称加密算法,服务端公钥加密,app端私钥解密,如R ...

  2. linux 下安装及查看java的安装路径

    一.Linux下安装JDK 1.下载文件 从官网下载合适版本如:jdk-8u191-linux-x64.tar.gz 2.安装文件 1.在 /usr/ 目录下创建 java文件夹mkdir /usr/ ...

  3. [LC] 225. Implement Stack using Queues

    Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...

  4. .net core && python

    最近.net core的发展,确实值得激动,强力推荐传教文章<.NET:持续进化的统一开发平台>http://www.cnblogs.com/wer-ltm/p/8776846.html ...

  5. Mybatis 入门之resultMap与resultType讲解实例

    resultMap:适合使用返回值是自定义实体类的情况 resultType:适合使用返回值得数据类型是非自定义的,即jdk的提供的类型 resultMap : type:映射实体类的数据类型 id: ...

  6. <JZOJ5938>分离计划

    emm骚操作 #include<cstdio> #include<iostream> #include<cstring> #include<algorithm ...

  7. laravel-事件

    1.注册事件以及监听器 首先我们需要在 app/Providers/目录下的EventServiceProvider.php中注册事件监听器映射关系,如下: /** * The event liste ...

  8. Future 异步多线程

    进来接手一个任务,需要做异步多线程数据源调用,数据源的配置和使用请阅读相关文章: https://www.cnblogs.com/haoliyou/p/9604452.html 配置好数据源后,实质上 ...

  9. MySQL远程访问失败的解决办法

    SQL连接预备知识:转载自https://jingyan.baidu.com/article/3ea51489e6cfbe52e61bba25.html问题:我想在另一个电脑通过navicat登陆本机 ...

  10. http://yuedu.baidu.com/ebook/36edd3d7ba1aa8114531d911

    本书概述:        全面深入自动化测试技术,包括接口自动化测试.app自动化测试.性能自动化测试技术:实践,理论结合,方案,环境,代码       java语言,python语言,自动化测试开发 ...