无刷新上传图片，ajax和iframe

iframe 上传

创新互联建站专注为客户提供全方位的互联网综合服务，包含不限于成都网站制作、成都做网站、洮南网络推广、微信小程序定制开发、洮南网络营销、洮南企业策划、洮南品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联建站为所有大学生创业者提供洮南建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<iframe id="upload_target" name="upload_target" src="upload.php" ></iframe>
<img id="tag_img" src="/upload/otherpic59/107580.jpg" />
<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

<?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 无刷新上传图片

<button id="J_headimg" >修改头像</button>
<input type="file" name="pic" id="pic" hidden accept="p_w_picpath/*" />
<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方法

public function uploadimg() {
   $file = $_FILES['file'];
   $arr = array('jpg'=>'p_w_picpath/jpeg','png'=>'p_w_picpath/png','gif'=>'p_w_picpath/gif','bmp'=>'p_w_picpath/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
文章网址：https://www.cdcxhl.com/article2/jdcioc.html

成都网站建设公司_创新互联，为您提供做网站、Google、服务器托管、关键词优化、域名注册、商城网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容