PHP+ajax图片上传的简单实现 mvc ajax 上传图片 jquery ajax 上传图片 php ajax 上传图-php教程-PHP中文网

PHP+ajax图片上传的简单实现 mvc ajax 上传图片 jquery ajax 上传图片 php ajax 上传图

php中文网

发布： 2016-07-29 08:55:10

原创

1642人浏览过

使用js实现ajax，PHP上传图片成功以后返回图片的路径（弹窗出来）。

效果如下：

1、上传界面：

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

2、上传成功以后

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

立即学习“PHP免费学习笔记（深入）”；

3、后台接收到的文件

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

代码很简单：

1、html与js部分：

<!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='text' name='textfield' id='textfield' class='txt' />
			<span  class="mybtn">浏览...</span>
			<input type="file" name="file" class="file" id="file" size="28"  />
			<span  class="mybtn">上传</span>
		</div>
	</body>

</html>

登录后复制

2、php部分：

<?php
if(isset($_FILES["myfile"]))
{
$ret = array();
//$uploadDir = 'images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;
$uploadDir = 'uploads'.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().'.'.pathinfo($_FILES["myfile"]["name"])['extension'];
$fileName = $_FILES["myfile"]["name"];
move_uploaded_file($_FILES["myfile"]["tmp_name"],$dir.$fileName);
$ret['file'] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;
}
echo json_encode($ret);
}
?>

登录后复制

以上就介绍了PHP+ajax图片上传的简单实现，包括了图片上传,ajax方面的内容，希望对PHP教程有兴趣的朋友有所帮助。