JavaScript&&ajax&&点击上传文件

html

<div>
    <!--此处仅保留一个文件夹图标并隐藏其他按钮-->
	<label for="fileName1" class="fa fa-folder-open-o fa-2x"></label>
	<input type="file" name="fileName1" id="fileName1" style="display: none;"/>
	<input type="button" ng-click="sendToUser();" id="sendToUser" value="提交" style="display: none;" />
</div>

javascript

	//点击文件夹图标并选择目标文件
	$('#fileName1').on('click', function () {
		// this.value = '';
	});
	//文件选择完毕后，input元素旁将出现备选文件名称并触发上传文件函数
	$('#fileName1').on('change', function () {
		$("#sendToUser").click();
	});

			//定义文件上传功能
			//在这里进行ajax 文件上传 用户的信息
			$scope.sendToUser = function(){
			    //获取用户所选目标文件内容(文件)对象
				var $file1 = $("input[name='fileName1']").val();
				
				// 判断文件是否为空
				if ($file1 == "") {
					alert("请选择上传的目标文件! ")
					return false;
				}
				//判断文件类型
				var fileName1 = $file1.substring($file1.lastIndexOf(".") + 1).toLowerCase();
				if(fileName1 != "xls" && fileName1 !="xlsx"){
				 	alert("请选择Execl文件!");
				 	return false;
				 }
				 
				//判断文件大小
				var size1 = $("input[name='fileName1']")[0].files[0].size;
				if (size1>104857600) {
					$(".mask").addClass('hide');
					alert("上传文件不能大于100M!");
					return false;
				}
				
				//初始化变量
				var boo1 = true;
				var type = "file";
				var formData = new FormData();//这里需要实例化一个FormData来进行文件上传
				formData.append(type,$("#fileName1")[0].files[0]);
				//ajax上传文件
				$.ajax({
					type : "post",
					url : "https://www.test.com/upload_files_200303.php",
					data : formData,
					processData : false,
					contentType : false,
					success : function(data){
						if (data=="error") {
							alert("文件提交失败!");
							console.log(data);
						}else{
							$("input[name='userUrl']").val(data);
							// alert("文件上传成功!");
							console.log(data);
							//拿到文件上传结果并发送信令告知下载路径
							var message = '{"event": "roomMessages","content":"<a href=\'http://www.test.com/ulfiles/' + $("#fileName1")[0].files[0].name + '\' target=\'_blank\' download=\'' + $("#fileName1")[0].files[0].name + '\'>' + $("#fileName1")[0].files[0].name + '"}';
							sendMessage(message, undefined);
						}}
				});
			}

php

<?php
header("Content-Type: text/html; charset=utf-8");

if ($_FILES["file"]["error"] > 0) {
            echo "Error: " . $_FILES["file"]["error"] . "<br />";
} else {
            //输出上传文件的信息
            echo "Upload: " . $_FILES["file"]["name"] . "<br />";
            echo "Type: " . $_FILES["file"]["type"] . "<br />";
            echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
            echo "Stored in: " . $_FILES["file"]["tmp_name"];
            //转移上传文件到目标路径下
            move_uploaded_file($_FILES['file']['tmp_name'], "ulfiles/" . $_FILES["file"]["name"]);
}
?>