検索

ホームページ  >  記事  >  バックエンド開発  >  PHP + ajax アップロード画像の簡単な実装 mvc ajax アップロード画像 jquery ajax アップロード画像 php ajax アップロード画像

PHP + ajax アップロード画像の簡単な実装 mvc ajax アップロード画像 jquery ajax アップロード画像 php ajax アップロード画像

WBOY
WBOYオリジナル
2016-07-29 08:55:101423ブラウズ
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 上传图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=&#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);
}
?>

上記では、画像アップロードと ajax コンテンツを含む、PHP + ajax 画像アップロードの簡単な実装を紹介しました。PHP チュートリアルに興味のある友人に役立つことを願っています。


声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：关于PDO--数据库抽象层 php pdo操作数据库 php pdo访问数据库 pdo 关闭数据次の記事：蛇形矩阵，回环矩阵，数字螺旋矩阵的PHP实现 php评论功能实现 php实现文件下载代码 php实现评论回复功

関連記事

続きを見る