PHP+ajax圖片上傳的簡單實作 mvc ajax 上傳圖片 jquery ajax 上傳圖片 php ajax 上傳圖-php教程-PHP中文網

PHP+ajax圖片上傳的簡單實作 mvc ajax 上傳圖片 jquery ajax 上傳圖片 php ajax 上傳圖

WBOY

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

原創

1482 人瀏覽過

使用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 上传图

程式碼很簡單：

1、html與js部分： kineditor 图片上传 ajax,ajax 上传图片,ajax base64上传图片,input file上传图片 ajax,ajax批量上传图片,mvc ajax 上传图片,jquery ajax 上传图片,php ajax 上传图

<!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部分：

<?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);
}
?>

登入後複製

以上就介紹了PHP+ajax圖片上傳的簡單實現，包括了圖片上傳,ajax方面的內容，希望對PHP教程有興趣的朋友有所幫助。