使用php+js异步上传图片

HTML语言如下，隐藏文件文本框，写一个button按钮，通过点击该按钮来弹出选择图片对话框：

<input type="file" id="uploadFile" name="uploadFile" style="display:none;" accept="image/*" onchange="uploadImage()"/>
<input type="button" name="upload" value="+ 浏览上传" onclick="uploadFile.click()">
<input type="hidden" name="images" id="images" value="" />

JS语言如下，主要用ajaxfileupload.js来传送图片文件信息到后端给PHP处理，然后接收PHP返回的信息，如果上传成功可以显示图片：

<script src="{MODULE_URL}template/mobile/js/ajaxfileupload.js"></script> 
<script type="text/javascript">
function uploadImage(){
	$.ajaxFileUpload({
		url:'{php echo $this->createMobileUrl("AjaxUploadImage");}',
		secureuri:false,
		fileElementId:'uploadFile',
		dataType: 'json',
		success: function (data, status){
			if(data.success == true){
				$("#newImageSrc").attr("src", data.path); //显示图片
				$("#images").val(data.path);//设置图片路径
			}else{
				alert(data.message);
			}
			
		},
		error: function(data, status, e) {
			alert("网络错误，请稍候重试");
		}
	});
	return false;
}
</script>

PHP后端主要是执行图片上传，然后返回json格式的信息给前端。

下载地址：http://www.haoshu888.com/download/js/ajaxfileupload.zip