angular-file-upload封裝爲指令+圖片尺寸限制
不瞭解angular-file-upload基礎使用javascript
請先參考http://blog.csdn.net/lai_xu/article/details/49535847 博客地址html
下文若是有更好的建議請多多評論java
1. directive.js中的指令編寫服務器
/*
上傳插件
*/
app.directive('myUpload', function (FileUploader) {
var helper = {
getType: function (name) {
return '|' + name.slice(name.lastIndexOf('.') + 1) + '|';
},
/*
type 類型
closeMsg true 關閉提示
*/
isImage: function (type, closeMsg) {
if ('|jpg|png|jpeg|bmp|gif|'.indexOf(type.toLowerCase()) !== -1) {
return true;
} else {
if (!closeMsg) {
layer.alert("請肯定文件格式爲|jpg|png|jpeg|bmp|gif|", { icon: 7 });
return false;
}
}
},
isDoc: function (type, closeMsg) {
if ('|doc|docx|txt|'.indexOf(type.toLowerCase()) !== -1) {
return true;
} else {
if (!closeMsg) {
layer.alert("請肯定文件格式爲|doc|docx|txt|", { icon: 7 });
return false;
}
}
},
isVideo: function (type, closeMsg) {
if ('|rm|rmvb|avi|mp4|3gp|'.indexOf(type.toLowerCase()) !== -1) {
return true;
} else {
if (!closeMsg) {
layer.alert("請肯定文件格式爲|rm|rmvb|avi|mp4|3gp|", { icon: 7 });
return false;
}
}
},
isMp3: function (type, closeMsg) {
if ('|mp3|'.indexOf(type.toLowerCase()) !== -1) {
return true;
} else {
if (!closeMsg) {
layer.alert("請肯定文件格式爲|mp3|", { icon: 7 });
return false;
}
}
},
isZip: function (type, closeMsg) {
if ('|zip|rar|'.indexOf(type.toLowerCase()) !== -1) {
return true;
} else {
if (!closeMsg) {
layer.alert("請肯定文件格式爲|zip|rar|", { icon: 7 });
return false;
}
}
},
//檢查尺寸是否符合規範
uploadImgCheckedPx: function (f, w, h, msg, callback) {
if (w && h) {
var reader = new FileReader();
reader.onload = function (e) {
//判斷圖片尺寸
var img = null;
img = document.createElement("img");
document.body.appendChild(img);
img.style.visibility = "hidden";
img.src = this.result;
var imgwidth = img.naturalWidth;
var imgheight = img.naturalHeight;
if (imgwidth != w || imgheight != h) {
document.body.removeChild(img);
if (msg) {
msg += ">";
} else {
msg = "";
}
//詢問框
layer.confirm(msg + "尺寸建議" + w + "x" + h + "，肯定上傳嗎？", {
btn: ['肯定', '取消'],
cancel: function () {
callback && callback(false);
}
}, function (index) {
layer.close(index);
callback && callback(true);
}, function () {
callback && callback(false);
});
} else {
callback && callback(true);
}
}
if (f)
reader.readAsDataURL(f);
} else {
callback && callback(true);
}
}
};
return {
restrict: 'E',
replace: true,
scope: {
filters: '@filters',
response: '=response',
size: '=size',
callback: '@callback',
width: '@width',
height: '@height',
msg: '@msg'
},
template: '<input type="file" nv-file-select="" uploader="uploader" filters="{{filters}}" />',
link: function (scope, element, attributes) {
element.bind("change", function (changeEvent) {
scope.$apply(function () {
scope.selectedFile = changeEvent.target.files[0];
var type = helper.getType(scope.selectedFile.name);
if (helper.isImage(type, true)) {
helper.uploadImgCheckedPx(scope.selectedFile, scope.width, scope.height, scope.msg, function (state) {
if (state)
scope.uploader.uploadAll();
else
scope.uploader.clearQueue();
});
} else {
scope.uploader.uploadAll();
}
});
});
},
controller: function ($scope) {
var uploader = $scope.uploader = new FileUploader({
url: '/Handler/Upload.ashx',
autoUpload: false,//自動上傳
removeAfterUpload: true,//文件上傳成功以後從隊列移除，默認是false
queueLimit: 1// 最大上傳文件數量
});
//文件限制提示語
var showMsg = function (itemSize, maxSize) {
if (itemSize / 1024 >= maxSize) {
layer.alert("文件大小必須小於" + (maxSize).toFixed(0) + "KB", { icon: 7 });
return false;
}
$scope.size = itemSize;
return true;
}
// FILTERS
uploader.filters.push({
name: 'imageFilter',
fn: function (item /*{File|FileLikeObject}*/, options) {
if (!showMsg(item.size, 4096)) {
return false;
}
var type = helper.getType(item.name);
return helper.isImage(type) && this.queue.length < 5;
}
},
{
name: 'docFilter',
fn: function (item /*{File|FileLikeObject}*/, options) {
if (!showMsg(item.size, 3072)) {
return false;
}
var type = helper.getType(item.name);
return helper.isDoc(type);
}
},
{
name: 'videoFilter',
fn: function (item /*{File|FileLikeObject}*/, options) {
if (!showMsg(item.size, 204800)) {
return false;
}
var type = helper.getType(item.name);
return helper.isVideo(type);
}
},
{
name: 'mp3Filter',
fn: function (item /*{File|FileLikeObject}*/, options) {
if (!showMsg(item.size, 20480)) {
return false;
}
var type = helper.getType(item.name);
return helper.isMp3(type);
}
},
{
name: 'zipFilter',
fn: function (item /*{File|FileLikeObject}*/, options) {
if (!showMsg(item.size, 20480)) {
return false;
}
var type = helper.getType(item.name);
return helper.isZip(type);
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function (item, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function (fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function (addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function (item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function (fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function (progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function (fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
if (response.indexOf("error") == -1) {
$scope.response = response;
if ($scope.callback) {
$scope.$emit($scope.callback, response);
}
}
else {
layer.alert(response, { icon: 2 });
}
};
uploader.onErrorItem = function (fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function (fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function (fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function () {
console.info('onCompleteAll');
};
}
};
});
2.如何使用app
<!-- filters 表明 你使用指令中的哪一個過濾器 例如 imageFilter docFilter 具體看 directive.js中的 filters msg 提示語 width height 圖片的限制尺寸 response 回掉屬性 上傳成功後會 給你的 $scope.resUrl賦值 callback 回掉方法 上傳成功後會 觸發你的 callback 方法 從而實現多圖上傳 size 回掉屬性 上傳成功後會 給你的 $scope.fileSize賦值 單位b字節 --> <my-upload filters="imageFilter" msg="單張圖片" width="690" height="350" response="resUrl" callback=""></my-upload> <my-upload filters="imageFilter" msg="多張圖片" width="690" height="350" response="" callback="addScenicLongPicEvent"></my-upload> <my-upload filters="mp3Filter" response="currentItem.VoiceUrl" size="fileSize"></my-upload>
3.controller中回掉方法dom
//多圖添加事件 對比2中 上傳圖片callback方法
$scope.$on('addScenicLongPicEvent', function (event, res) {
$scope.currentScenicLongPic.push(res);
});
4.後臺上傳代碼ide
/// <summary>
/// Upload 的摘要說明
/// </summary>
public class Upload : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
try
{
var file = context.Request.Files[0];
var debugState = System.Configuration.ConfigurationManager.AppSettings["DebugState"];
var path = file.FileName.Substring(file.FileName.LastIndexOf("."));
var name = "qhLjlx/" + path + "/" + ((DateTime.Now.ToUniversalTime().Ticks - 621355968000000000) / 10000) + new Random().Next(10, 99); //時間戳
name += path; //獲取文件名稱
var resUrl = "";
//aliyun upload
if (LjlxUpdate.UpdateAL(name, file.InputStream, out resUrl, debugState == "true"))
context.Response.Write(resUrl);
else
context.Response.Write("error|服務器端錯誤遠程阿里雲上傳失敗!");
}
catch (Exception ex)
{
context.Response.Write("error|" + ex.Message);
}
return;
}
public bool IsReusable
{
get
{
return false;
}
}
}
相關文章
- 1. 0805封裝尺寸/0402封裝尺寸/0603封裝尺寸/1206封裝尺寸
- 2. DO-214AC封裝尺寸圖
- 3. Allegro 封裝尺寸
- 4. 0805,1206等封裝尺寸
- 5. js限制上傳圖片的格式和尺寸
- 6. element upload限制上傳圖片尺寸、大小、比例
- 7. ajaxfileupload批量上傳文件+圖片尺寸限制
- 8. Java修改圖片尺寸
- 9. 圖片壓縮尺寸
- 10. ios圖片尺寸2018
- 更多相關文章...
- • C# 封裝 - C#教程
- • Markdown 圖片 - Markdown 教程
- • Docker容器實戰(六) - 容器的隔離與限制
- • Docker 清理命令
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
相關文章