search

Home  >  Article  >  Backend Development  >  Simple implementation of PHP+ajax image upload mvc ajax upload image jquery ajax upload image php ajax upload image

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

WBOY
WBOYOriginal
2016-07-29 08:55:101452browse
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>
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);
}
?>

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.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：关于PDO--数据库抽象层 php pdo操作数据库 php pdo访问数据库 pdo 关闭数据Next article：蛇形矩阵，回环矩阵，数字螺旋矩阵的PHP实现 php评论功能实现 php实现文件下载代码 php实现评论回复功

Related articles

See more