ajax 单文件上传

使用插件：jQueryFileUpload

首先声明，当前文件只能进行单文件上传

1. 下载和安装

下载地址

如何安装？

将下载后的压缩包解压，并将文件夹整体拷贝到项目根目录下

并在项目跟目录下，新建 index.html、handle_upload.php 和 upload 文件夹

2. 编写前端代码

2.1 引入文件

要使用此插件，需要引入如下几个js文件

<script src="./jQuery-File-Upload-10.4.0/js/jquery-3.4.1.min.js"></script>
<script src="./jQuery-File-Upload-10.4.0/js/vendor/jquery.ui.widget.js"></script>
<script src="./jQuery-File-Upload-10.4.0/js/jquery.iframe-transport.js"></script>
<script src="./jQuery-File-Upload-10.4.0/js/jquery.fileupload.js"></script>

并且我们使用 bootstrap 美化页面，所以需要引入 bootstrap样式

<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

2.2 HTML代码

编写如下 html 代码

<div class="box">
    <label for="fileupload" class="upload btn btn-success glyphicon glyphicon-upload">上传</label>
    <input id="fileupload" type="file" name="file" style="display: none;">
    <!--上传进度条-->
    <div class="progress_box">
      <progress value="0" max="100"></progress>
      <span id="upload_info"></span>
    </div>
    <!--图片上传成功后预览-->
    <img id="uploadimg" src="" width="400px" />
  </div>

说明：

美化上传控件

出于美化目的，将文件域隐藏，设置label 的 for 属性的值为文件域的id，然后再对label 进行美化，这样点击label也能打开文件选择对话框

<label for="fileupload" class="upload btn btn-success glyphicon glyphicon-upload">上传</label>
<input id="fileupload" type="file" name="file" style="display: none;">

上传进度

上传进度使用 h5 中新增的 progress 元素，并创建一个id为upload_info 的控件，用于在上传完成后显示完成信息

<div class="progress_box">
    <progress value="0" max="100"></progress>
    <span id="upload_info"></span>
</div>

显示预览

此插件可以上传各种类型的文件，包括图片，所以我么在最后放了一个 img 元素，用于上传成功后进行图片预览，但由于图片尺寸比较小，又是在本地测试，所以最后我们测试上传进度显示时，会上传一个其他类型的文件，此 img 标签就没有用了

<!--图片上传成功后预览-->
<img id="uploadimg" src="" width="400px" />

2.3 CSS 代码

稍微写点CSS 代码，对页面进行美化

.box {
   width: 500px;
   padding: 10px;
   margin: 50px auto;
 }

 .upload {
   width: 100px;
   font-size: 20px;
 }

 .progress_box {
   margin-top: 10px;
   display: none;
 }

2.4 JS 代码

这是实现上传的核心代码

我们当前的要求如下

选择文件之后立即上传
上传过程中显示进度条
上传完成后显示提示文字“上传完成”
再次添加要上传的文件后，应该将提示文字“上传成功”清除

下面是JS 代码

  $('#fileupload').fileupload({
    dataType: 'json',
    url: "handle_upload.php",//处理上传的php文件地址
    //设置进度条
    progressall: function (e, data) {
      var progress = parseInt(data.loaded / data.total * 100);
      $('progress').val(progress);
    },
    //上传完成之后的操作，显示在img里面
    done: function (e, data) {
      // 如果上传的图片，就取消下面代码的注释
      //$("#uploadimg").attr('src', data.result.url);
      $('#upload_info').html('上传完成')
    }
  })
  // 用户再次选择文件后，清除提示文字，并设置进度条可见
  $('#fileupload').on('fileuploadadd', function () {
    $('.progress_box').css('display', 'block')
    $('#upload_info').html('')
  })

首先解释下面的代码

  // 用户再次选择文件后，清除提示文字
  $('#fileupload').on('fileuploadadd', function () {    
    $('.progress_box').css('display', 'block')
    $('#upload_info').html('')
  })

fileuploadadd 事件会在用户添加上传文件后触发

所以在这个事件中，我们将默认隐藏的进度条控件显示，并清除上次上传成功后的提示文本

然后解释 done 事件

此事件会在服务器成功返回消息时触发，所以在这个事件中，我们显示图片预览以及显示成功后的提示文本

 //上传完成之后的操作，显示在img里面
    done: function (e, data) {
      // 如果上传的图片，就取消下面代码的注释
      //$("#uploadimg").attr('src', data.result.url);
      $('#upload_info').html('上传完成')
    }

3. 服务端编写

我们这里使用 php 编写服务端代码

<?php
$file=$_FILES['file'];
// 获取文件扩展名
$res=pathinfo($file['name']);
$exname=$res['extension'];
// 生成唯一的名字
$filename=time().'.'.$exname;

move_uploaded_file($file['tmp_name'],'./upload/'.$filename);
echo json_encode(['url'=>'upload/'.$filename]);

说明：

因为服务器端文件名称不能重复，所以采用当前时间戳为上传的文件命名
上传成功后，应该以json格式返回文件路径

4. 问题

默认，PHP 允许上传的文件尺寸比较小，如果向上传大文件，需要打开 php.ini 文件，将如下两个配置改大一些

upload_max_filesize = 100M
post_max_size = 100M

加菲猫的狗

发布了138 篇原创文章 · 获赞 51 · 访问量 33万+

私信关注