jquery 图片上传

弄了一天

插件的$.ajax 坑了我半天没有 dataType: "json", 这一行老是获取不到数据

这个是上传页面引入上面的js文件和CSS文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>easyUpload.js</title>
  <link rel="stylesheet" href="easy-upload.css">
  <style>
    html{
      /* background: #f5f5f5; */
      background: #fff;
    }
  </style>
</head>
<body>
  <form action="form.php" method="post">
    <!-- 项目中把这个表单写成隐藏的效果更好看 -->
    <input type="text" id="images" name="images" value="">
    <button type="">上传</button>
  </form>
  <div id="easyContainer"></div>
 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <!-- 视实际需要决定是否引入jquery.cookie-1.4.1.min.js-->
  <script src="vendor/jquery.cookie-1.4.1.min.js"></script>
  <script src="easyUpload.js"></script>
  <script>
    $('#easyContainer').easyUpload({
      allowFileTypes: '*.jpg;*.doc;*.pdf',//允许上传文件类型，格式';*.doc;*.pdf'
      allowFileSize: 100000,//允许上传文件大小(KB)
      selectText: '选择文件',//选择文件按钮文案
      multi: true,//是否允许多文件上传
      multiNum: 10,//多文件上传时允许的文件数
      showNote: true,//是否展示文件上传说明
      note: '提示：最多上传5个文件，支持格式为doc、pdf、jpg',//文件上传说明
      showPreview: true,//是否显示文件预览
      url: 'upload.php',//上传文件地址
      fileName: 'file',//文件filename配置参数
      path:'path',//返回的图片地址字段 默认path
      formParam: {
        token: $.cookie('token_cookie')//不需要验证token时可以去掉
      },//文件filename以外的配置参数，格式：{key1:value1,key2:value2}
      timeout: 30000,//请求超时时间
      okCode: 200,//与后端返回数据code值一致时执行成功回调，不配置默认200
      successFunc: function(res) {
        console.log('成功回调', res.success);
        $('#images').val(res.success)//提交到页面后用逗号隔开每个图片的地址
        // console.log($('#images').val());
      },//上传成功回调函数
      errorFunc: function(res) {
        console.log('失败回调', result);
      },//上传失败回调函数
      deleteFunc: function(res) {
        console.log('删除回调', res);
      }//删除文件回调函数
    });
  </script>
</body>
</html>

upload.php文件

<?php
header("Content-Type: text/html;charset=utf-8"); 
if($_SERVER['REQUEST_METHOD']== 'POST'){
	upload();
}
function upload()
{
	$upload ='./upload/';//文件储存路径
	if ($_FILES["file"]["error"] > 0)
		{
			echo "错误：" . $_FILES["file"]["error"] . "<br>";
		}
		else
		{
			//print_r($_FILES["file"]["size"]);exit();文件大小
			$allowedExts = array("gif", "jpeg", "jpg", "png");// 允许上传的图片后缀
			$temp = explode(".", $_FILES["file"]["name"]);
			$extension = end($temp);     // 获取文件后缀名
			if(in_array($extension,$allowedExts)
				&& ($_FILES["file"]["size"] < 1024*1024*5) // 小于 5M
			){
				//echo "上传文件名: " . $_FILES["file"]["name"] . "<br>";
				//echo "文件类型: " . $_FILES["file"]["type"] . "<br>";
				//echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
				//echo "文件临时存储的位置: " . $_FILES["file"]["tmp_name"];
				 // 判断当期目录下的 upload 目录是否存在该文件
				// 如果没有 upload 目录，你需要创建它，upload 目录权限为 777
				$new_name = date('Y-m-d-H-i-s') . '-' . uniqid().mt_rand(100,999).'.'."$extension";//生成的文件名称
				if (file_exists($upload.$new_name))
				{
					echo " 文件已经存在 ";
				}
				else
				{
					// 如果 upload 目录不存在该文件则将文件上传到 upload 目录下
					move_uploaded_file($_FILES["file"]["tmp_name"], $upload. $new_name);
					$data['path'] = $upload. $new_name;
					$data['info'] = '上传成功';
					$data['code'] = 200;
                    echo json_encode($data);
				}
			}else{
				echo "错误：文件格式不对哦";
			}
			
		}
}

上传成功再完善下就完美了

晚上把部分地方修改了一下

easyUpload.js.rar

这是源码可以参考下