首先下载ng-file-upload.js以及ng-file-upload-shim.js文件
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文件上传</title>
<meta charset="utf-8" />
</head>
<body>
<form name="myForm1" ng-controller="singlePicUploadController">
<fieldset>
<legend>单文件上传</legend>
<div class="button" ngf-select="" ngf-pattern="'image/*'" ngf-multiple="false" ng-model="data.file" style="width:80px;height: 50px;background: red;"></div>
<button ng-click="sigleUpload()">upload</button>
</fieldset>
</form>
<form name="myForm2" ng-controller="dultiplePicUploadController">
<fieldset>
<legend>多文件上传</legend>
<div class="button" ngf-select ngf-pattern="'image/*'" ng-model="files" ngf-multiple="true">选择多张图片</div>
<button ng-click="multiUpload()">upload</button>
</fieldset>
</form>
<form name="myForm3" ng-controller="dropUploadController">
<fieldset>
<legend>拖拽上传</legend>
<div ngf-drop ngf-pattern="'image/*'" ng-model="data.file" class="cropArea">
<img-crop image="data.file|| data.defaultImage" resule-image="data.file"></img-crop>
<div style="width: 150px;height: 150px;border: 1px solid orange;">
</div>
</div>
<button ng-click="dropUpload()">upload</button>
</fieldset>
</form>
</body>
<script src="angular.js"></script>
<script src="ng-file-upload-shim.js"></script>
<script src="ng-file-upload.js"></script>
<script>
var app = angular.module('app', ['ngFileUpload']);
//单文件上传
app.controller('singlePicUploadController', function ($scope, Upload) {
//提交
$scope.sigleUpload = function () {
$scope.upload($scope.data.file);
};
$scope.upload = function (file) {
Upload.upload({
//服务端接收
url: 'fileupload.php',
//上传的同时带的参数
file: file
}).progress(function (evt) {
//进度条
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progess:' + progressPercentage + '%');
}).success(function (data, status, headers, config) {
//上传成功
console.log('file ' + config.file.name + 'uploaded. Response: ');
$scope.uploadImg = data;
}).error(function (data, status, headers, config) {
//上传失败
console.log('error status: ' + status);
});
};
});
//多文件上传
app.controller('dultiplePicUploadController', function ($scope, Upload) {
//提交
$scope.multiUpload = function () {
for (var i = 0; i < $scope.files.length; i++) {
$scope.upload($scope.files[i]);
}
};
$scope.upload = function (file) {
Upload.upload({
//服务端接收
url: 'fileupload.php',
//上传的同时带的参数
file: file
}).progress(function (evt) {
//进度条
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progess:' + progressPercentage + '%');
}).success(function (data, status, headers, config) {
//上传成功
console.log('file ' + config.file.name + 'uploaded. Response: ');
$scope.uploadImg = data;
}).error(function (data, status, headers, config) {
//上传失败
console.log('error status: ' + status);
});
};
});
//拖拽上传
app.controller('dropUploadController', function ($scope, Upload) {
//提交
$scope.dropUpload = function () {
$scope.upload($scope.data.file);
};
$scope.upload = function (file) {
Upload.upload({
//服务端接收
url: 'fileupload.php',
//上传的同时带的参数
file: file
}).progress(function (evt) {
//进度条
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progess:' + progressPercentage + '%');
}).success(function (data, status, headers, config) {
//上传成功
console.log('file ' + config.file.name + 'uploaded. Response: ');
$scope.uploadImg = data;
}).error(function (data, status, headers, config) {
//上传失败
console.log('error status: ' + status);
});
};
});
</script>
</html>
php文件
<?php
// 允许上传的图片后缀
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
echo $_FILES["file"]["size"];
$extension = end($temp); // 获取文件后缀名
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 204800) // 小于 200 kb
&& in_array($extension, $allowedExts))
{
if ($_FILES["file"]["error"] > 0)
{
echo "错误：: " . $_FILES["file"]["error"] . "<br>";
}
else
{
echo "上传文件名: " . $_FILES["file"]["name"] . "<br>";
echo "文件类型: " . $_FILES["file"]["type"] . "<br>";
echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "文件临时存储的位置: " . $_FILES["file"]["tmp_name"] . "<br>";
// 判断当期目录下的 upload 目录是否存在该文件
// 如果没有 upload 目录，你需要创建它，upload 目录权限为 777
if (file_exists("img/" . $_FILES["file"]["name"]))
{
echo $_FILES["file"]["name"] . " 文件已经存在。 ";
}
else
{
// 如果 upload 目录不存在该文件则将文件上传到 upload 目录下
move_uploaded_file($_FILES["file"]["tmp_name"], "img/" . $_FILES["file"]["name"]);
echo "文件存储在: " . "upload/" . $_FILES["file"]["name"];
}
}
}
else
{
echo "非法的文件格式";
}
?>
进去的界面如下
文件会默认上传到img文件夹下。
网友评论