我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文记录一个比较常见的基于jquery的ajax文件上传代码，是为后面的文章做准备的，使用php作为后端接收文件的代码，在范例中的php代码并没有对上传的文件进行过滤，所以请不要直接复制到生产环境中。

苏南大叔：基于jquery的ajax文件上传代码，php接收文件上传 - jquery-ajax-upload
基于jquery的ajax文件上传代码，php接收文件上传（图3-1）

苏南大叔的"程序如此灵动"博客，记录苏南大叔和计算机代码的故事。测试环境：谷歌浏览器，php@74。

前端部分（jquery）

这个文件上传，允许上传多个文件，限制了上传文件的类型。

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="file_input" multiple="multiple" accept=".jpeg,.jpg,.gif,.png,.txt,.log,.html"/>
<script type="text/javascript">
  var file_obj = document.getElementById("file_input");
  file_obj.onchange = function () {
    var files = file_obj.files;
    for (var i = 0; i < files.length; i++) {
      doUpload(files[i]);
    }
  };
  function doUpload(file) {
    var data2 = new FormData();
    data2.append("file", file);
    $.ajax({
      async: true,
      url: "upload.php",
      type: "POST",
      cache: false,
      processData: false,
      contentType: false,
      data: data2,
      timeout: 60000,
      success: function (json) {
        console.log(json)
      },
      error: function (json) {},
    });
  }
</script>
HTML

苏南大叔：基于jquery的ajax文件上传代码，php接收文件上传 - ajax前端代码
基于jquery的ajax文件上传代码，php接收文件上传（图3-2）

关于FormData的说明：

关于jquery的ajax部分说明：

后端部分（php）

没做上传文件限制，所以不要直接用于生产环境。提前建好upload目录，给予文件写入权限。

doupload("file");
function doupload($name){
    $file = $_FILES[$name];
    $name = $file['name'];
    $name_arr = explode('.', $name);
    $name_new = md5(current($name_arr)) . '_' . time() . '.' . end($name_arr);
    $file_saved = "./upload/" . $name_new;
    if (move_uploaded_file($file['tmp_name'], $file_saved)) {
        echo json_encode(["ok"=>"ok"]);
    }
}
PHP

苏南大叔：基于jquery的ajax文件上传代码，php接收文件上传 - move-upload-file
基于jquery的ajax文件上传代码，php接收文件上传（图3-3）

关于php上传的相关文章：

结束语

关于jquery的相关经验文章，您可以在这里找到：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   php    jquery