<\/p>\n
<!DOCTYPE html>\n<html>\n <head>\n <title>\u56fe\u7247\u4e0a\u4f20\u793a\u4f8b<\/title>\n <meta charset="utf-8">\n <script src="upload.js"><\/script>\n <style>\n *{\n padding: 0;\n margin: 0;\n }\n #app{\n width: 500px;\n margin: 100px auto 0;\n padding: 20px 20px;\n background: #eee;\n border-radius: 15px;\n }\n <\/style>\n <\/head>\n<body>\n \n <div id="app">\n <h1>fetch\u56fe\u7247\u4e0a\u4f20\u793a\u4f8b<\/h1>\n \n <!--\u4e0a\u4f20\u8868\u5355-->\n <input type="file" id="imageFile" accept="image\/*">\n \n <!--\u4e0a\u4f20\u7ed3\u679c-->\n <div id="result"><\/div>\n <\/div>\n<\/body>\n<\/html><\/code><\/pre>\nupload.js<\/h2>\n\/\/ \u786e\u4fddJavaScript\u4ee3\u7801\u5728DOM\u52a0\u8f7d\u5b8c\u6210\u540e\u6267\u884c\ndocument.addEventListener('DOMContentLoaded', function() {\n \n \/\/ \u83b7\u53d6\u70b9\u51fb\u4e0a\u4f20\u7684\u6309\u94ae\n var fileButton = document.getElementById('imageFile');\n \n \/\/ \u76d1\u542c\u9009\u62e9\u6587\u4ef6\u6309\u94ae\u662f\u5426\u5df2\u7ecf\u9009\u62e9\u4e86\u6587\u4ef6\n fileButton.addEventListener('change', function (){\n \n \/\/ \u83b7\u53d6\u9009\u62e9\u7684\u6587\u4ef6\n var fileSelected = fileButton.files[0];\n \n \/\/ \u6267\u884c\u4e0a\u4f20\u51fd\u6570\n uploadFile(fileSelected, function(error, response) {\n if (error) {\n \n \/\/ \u4e0a\u4f20\u6587\u4ef6\u5931\u8d25\n console.log(error);\n } else {\n \n \/\/ \u4e0a\u4f20\u6587\u4ef6\u6210\u529f\n var jsonData = JSON.parse(response);\n \n console.log(jsonData);\n \n \/\/ \u663e\u793a\u4e0a\u4f20\u7ed3\u679c\u9884\u89c8\n document.getElementById('result').innerHTML = '<img src="'+jsonData.url+'" width="350" \/>';\n }\n });\n });\n \n \/\/ \u6e05\u7a7afile\u8868\u5355\u7684\u9009\u62e9\n fileButton.value = '';\n})\n\n\/\/ \u4e0a\u4f20\u51fd\u6570\nfunction uploadFile(file, callback) {\n \n \/\/ \u83b7\u53d6\u8868\u5355\u6570\u636e\n var formData = new FormData();\n formData.append('file', file);\n \n \/\/ \u8bf7\u6c42\u4e0a\u4f20\u670d\u52a1\u5668\n fetch('upload.php', {\n method: 'POST',\n body: formData,\n })\n .then(function(response) {\n return response.text();\n })\n .then(function(data) {\n callback(null, data);\n })\n .catch(function(error) {\n callback(error, null);\n });\n}<\/code><\/pre>\nupload.php<\/h2>\n<?php\n\/\/ \u7f16\u7801\nheader("Content-type:application\/json");\n \n\/\/ \u83b7\u53d6\u6587\u4ef6\n$file = $_FILES["file"]["name"];\n \n\/\/ \u83b7\u53d6\u6587\u4ef6\u540e\u7f00\u540d\n$hzm = substr($file,strpos($file,"."));\n \n\/\/ \u8bbe\u7f6e\u65b0\u6587\u4ef6\u540d\n$newfile = date("Y-m-d")."-".rand(100,999);\n \n\/\/ \u5141\u8bb8\u4e0a\u4f20\u7684\u540e\u7f00\n$allowedExts = array("gif", "jpeg", "jpg", "png");\n$temp = explode(".", $file);\n$extension = end($temp);\n\nif ((($_FILES["file"]["type"] == "image\/gif")\n|| ($_FILES["file"]["type"] == "image\/jpeg")\n|| ($_FILES["file"]["type"] == "image\/jpg")\n|| ($_FILES["file"]["type"] == "image\/pjpeg")\n|| ($_FILES["file"]["type"] == "image\/x-png")\n|| ($_FILES["file"]["type"] == "image\/png"))\n&& ($_FILES["file"]["size"] < 10485760)\n&& in_array($extension, $allowedExts)){\n \n \/\/ \u5224\u65ad\u4e0a\u4f20\u7ed3\u679c\n if ($_FILES["file"]["error"] > 0){\n \n $result = array(\n 'code' => 201,\n 'msg' => '\u4e0a\u4f20\u5931\u8d25'\n );\n }else{\n \n \/\/ \u4e0a\u4f20\u6587\u4ef6\n move_uploaded_file($_FILES["file"]["tmp_name"], "upload\/".$newfile.$hzm);\n $file_url = 'http:\/\/'.$_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"];\n $result = array(\n "code" => 200,\n "msg" => "\u4e0a\u4f20\u6210\u529f",\n "url" => dirname($file_url)."\/upload\/".$newfile.$hzm\n );\n }\n}else{\n \n $result = array(\n 'code' => 202,\n 'msg' => '\u6b64\u7c7b\u6587\u4ef6\u4e0d\u80fd\u4e0a\u4f20'\n );\n}\n\n\/\/ \u8f93\u51faJSON\necho json_encode($result, JSON_UNESCAPED_UNICODE);\n?><\/code><\/pre>\n\u6ce8\u610f\uff0c\u9700\u8981\u5728\u540c\u4e00\u76ee\u5f55\u4e0b\u5efa\u7acbupload\u76ee\u5f55\u4ee5\u5b58\u653e\u4e0a\u4f20\u7684\u6587\u4ef6\u3002<\/p>\n
![\"image.png\"](\"https:\/\/segmentfault.com\/img\/bVc8xd0\" "\\"image.png\\"")
<\/p>\n
\u4f5c\u8005<\/h2>\n
TANKING<\/p>\n