Simple implementation of PHP+ajax image upload mvc ajax upload image jquery ajax upload image php ajax upload image-PHP Tutorial-php.cn

Simple implementation of PHP+ajax image upload mvc ajax upload image jquery ajax upload image php ajax upload image

WBOY

Release： 2016-07-29 08:55:10

Original

1451 people have browsed it

Use js to implement ajax, and PHP will return the path of the image after successfully uploading the image (a pop-up window will appear).

The effect is as follows:

1. Upload interface:

kineditor 图片上传 ajax,ajax 上传图片,ajax base64上传图片,input file上传图片 ajax,ajax批量上传图片,mvc ajax 上传图片,jquery ajax 上传图片,php ajax 上传图

2. After successful upload

kineditor 图片上传 ajax,ajax 上传图片,ajax base64上传图片,input file上传图片 ajax,ajax批量上传图片,mvc ajax 上传图片,jquery ajax 上传图片,php ajax 上传图

3. Files received in the background

kineditor 图片上传 ajax,ajax 上传图片,ajax base64上传图片,input file上传图片 ajax,ajax批量上传图片,mvc ajax 上传图片,jquery ajax 上传图片,php ajax 上传图

The code is very simple:

1, html and js part:

<!DOCTYPE html>
<html>

	<head>
		<title>Html5 Ajax 上传文件</title>
		<meta charset="utf-8">
		<script type="text/javascript">
			var xhr;

			function createXMLHttpRequest() {
				if (window.ActiveXObject) {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				} else if (window.XMLHttpRequest) {
					xhr = new XMLHttpRequest();
				}
			}

			function UpladFile() {
				var fileObj = document.getElementById("file").files[0];
				var FileController = 'doajaxfileupload.php';
				var form = new FormData();
				form.append("myfile", fileObj);
				createXMLHttpRequest();
				xhr.onreadystatechange = handleStateChange;
				xhr.open("post", FileController, true);
				xhr.send(form);
			}

			function handleStateChange() {
				if (xhr.readyState == 4) {
					if (xhr.status == 200 || xhr.status == 0) {
						var result = xhr.responseText;
						var json = eval("(" + result + ")");
						alert('图片链接:\n' + json.file);
					}
				}
			}
		</script>
		<!--<style>
			.txt{ height:28px; border:1px solid #cdcdcd; width:670px;}
			    .mybtn{ background-color:#FFF; line-height:14px;vertical-align:middle;border:1px solid #CDCDCD;height:30px; width:70px;}
			    .file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
		</style>-->
	</head>

	<body>
		<div class="form-group">
			<label class="control-label">图片</label>
			<br/>
			<input type=&#39;text&#39; name=&#39;textfield&#39; id=&#39;textfield&#39; class=&#39;txt&#39; />
			<span  class="mybtn">浏览...</span>
			<input type="file" name="file" class="file" id="file" size="28"  />
			<span  class="mybtn">上传</span>
		</div>
	</body>

</html>

Copy after login

2, php part:

<?php
if(isset($_FILES["myfile"]))
{
$ret = array();
//$uploadDir = &#39;images&#39;.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;
$uploadDir = &#39;uploads&#39;.DIRECTORY_SEPARATOR;
$dir = dirname(__FILE__).DIRECTORY_SEPARATOR.$uploadDir;
file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777));
if(!is_array($_FILES["myfile"]["name"])) //single file
{
//$fileName = time().uniqid().&#39;.&#39;.pathinfo($_FILES["myfile"]["name"])[&#39;extension&#39;];
$fileName = $_FILES["myfile"]["name"];
move_uploaded_file($_FILES["myfile"]["tmp_name"],$dir.$fileName);
$ret[&#39;file&#39;] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;
}
echo json_encode($ret);
}
?>

Copy after login

The above introduces the simple implementation of PHP+ajax image upload, including image upload and ajax content. I hope it will be helpful to friends who are interested in PHP tutorials.