我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

本文记录一个比较常见的基于jqueryajax文件上传代码,是为后面的文章做准备的,使用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>

苏南大叔:基于jquery的ajax文件上传代码,php接收文件上传 - ajax前端代码
基于jquery的ajax文件上传代码,php接收文件上传(图3-2)

关于FormData的说明:

关于jqueryajax部分说明:

后端部分(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"]);
    }
}

苏南大叔:基于jquery的ajax文件上传代码,php接收文件上传 - move-upload-file
基于jquery的ajax文件上传代码,php接收文件上传(图3-3)

关于php上传的相关文章:

结束语

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

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

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

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

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