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

WBOY
Lepaskan: 2016-07-29 08:55:10
asal
1420 orang telah melayarinya
使用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部分:



	
		<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 = &#39;doajaxfileupload.php&#39;;
				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(&#39;图片链接:\n&#39; + 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>-->
	

	
		<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>
	

Salin selepas log masuk
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);
}
?>
Salin selepas log masuk

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan