用angularjs在本地驱动器上传文件 [英] File uploading in a local drive with angularjs

问题描述

我是angularjs的初学者。
我读了很多关于文件上传等的内容。
但是找不到任何有关这个案例的话题，我会进一步描述。

我想在下面的代码

中选择一个帮助按钮（带搜索名）的文件，然后当我们点击第二个按钮（带有上传名称） ，我在 D：\已下载的文件中创建的本地驱动器中选择了文件上载，例如


从桌面上选择一个带有搜索按钮的文件，然后当我们点击上传，这个文件复制到D：\上传文件

如果可能的话请在小提琴演出。
Thanks all。

感谢所有人为我们制定了解决方案

  uploader.directive（readfile，[function（）{
返回{
范围：{
 readfile：=
}，
 link：function（scope，element，attributes）{
 element.bind（change ，function（changeEvent）{
 var reader = new FileReader（）; 
 reader.onload = function（loadEvent）{$ b $ scope。$ apply（function（）{
 scope .readfile = {FileName：changeEvent.target.value.split（'\\'）。pop（），Content：loadEvent.target.result，Size：loadEvent.total}; 
}）; 
} 
 reader.readAsDataURL（changeEvent.target.files [0]）; 
}）; 
} 
} 
}] ）; 
  

用于上传文件：

<$ p $函数MyCTRL（$ scope，$ http，$ modal）
{
$ scope.currentFile =;

$ scope.currentFileGroup =;

$ scope.currentFileDescription =;

$ scope.attachedFile = [];

$ scope.fileUpload = function（）

{

$ scope.attachedFile.push（{

fileGUID：GUID（）+。+ $ scope.currentFile.FileName.split（'。'）。pop（），
fileName：$ scope.currentFile.FileName，
fileGroup ：$ scope.currentFileGroup，
fileDescription：$ scope.currentFileDescription，
fileSize：$ scope.currentFile.Size，
fileContent：$ scope.currentFile.Content，
fileState：wait
}）;

$ scope.currentFile =;
$ scope.currentFileGroup =;
$ scope.currentFileDescription =;
$ scope.AddBtnShow = false;

var saveFile = new dataStructure（）;
var fileContent =;
for（var i = 0; i <$ scope.attachedFile.length; i ++）{
if（$ scope.attachedFile [i] .fileState！=sent）{
fileContent = $ scope.attachedFile [i] .fileContent;
saveFile.EntityInfo [0] .Name = $ scope.attachedFile [i] .fileGUID;
saveFile.EntityInfo [0] .Type =CUSTOMFILE;

saveFile.EntityData = [
{Content：fileContent}
];
var inputjsondata = JSON.stringify（saveFile）;
$ http（{method：'POST'，url：rootURL +'/ data / savefilecontent'，data：inputjsondata，dataType：'text'，processData：false，async：false，headers：{'Content-Type '：'application / json; charset = utf-8'}}）。success（function（data）{
}）;
$ scope.attachedFile [i] .fileState =sent;

$ scope.formData.Attachments.push（{
FilenameGUID：$ scope.attachedFile [i] .fileGUID，
Filename：$ scope.attachedFile [i ] .fileName，
Group：$ scope.attachedFile [i] .fileGroup，
Description：$ scope.attachedFile [i] .fileDescription，
UploadDate：uploadGregorianDate ）
}）;
}
}
};

现在一切正常。

I'm beginner in angularjs. I read a lot about file uploading and etc. But couldn't find any topics for this case that i will describe in further.

I want to choose a file with helping of a button(with search Name) in below code

then when we click on second button (with upload Name), my chose file upload in a local drive that i made in D:\Uploaded Files already

for example I want choose a file from desktop with search button, then when we click on upload, this file copy to D:\Uploaded Files

If it's possible please show me in fiddler. Thanks all.

Thanks all for shairing

解决方案

You need to use a directive like below.

uploader.directive("readfile", [function () {
    return {
        scope: {
            readfile: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.readfile = { "FileName":changeEvent.target.value.split('\\').pop() , "Content":loadEvent.target.result , "Size":loadEvent.total };
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
}]);

For uploading the files:

function MyCTRL($scope, $http, $modal)
{
    $scope.currentFile="";

    $scope.currentFileGroup="";

    $scope.currentFileDescription="";

    $scope.attachedFile=[];

    $scope.fileUpload=function () 

    {

    $scope.attachedFile.push ({

        "fileGUID": GUID() + "." + $scope.currentFile.FileName.split('.').pop(),
        "fileName": $scope.currentFile.FileName,
        "fileGroup": $scope.currentFileGroup,
        "fileDescription": $scope.currentFileDescription,
        "fileSize": $scope.currentFile.Size,
        "fileContent": $scope.currentFile.Content,
        "fileState": "wait"
    });

    $scope.currentFile = "";
    $scope.currentFileGroup = "";
    $scope.currentFileDescription = "";
    $scope.AddBtnShow=false;

    var saveFile = new dataStructure();
    var fileContent = "";
    for (var i=0; i < $scope.attachedFile.length; i++) {
        if($scope.attachedFile[i].fileState!="sent") {
        fileContent = $scope.attachedFile[i].fileContent;
        saveFile.EntityInfo[0].Name = $scope.attachedFile[i].fileGUID;
        saveFile.EntityInfo[0].Type = "CUSTOMFILE";

            saveFile.EntityData = [
                {"Content": fileContent}
            ];
            var inputjsondata = JSON.stringify(saveFile);
            $http({ method: 'POST', url: rootURL + '/data/savefilecontent', data: inputjsondata, dataType: 'text', processData: false, async: false, headers: { 'Content-Type': 'application/json; charset=utf-8' } }).success(function (data) {
            });
            $scope.attachedFile[i].fileState = "sent";

            $scope.formData.Attachments.push({
                "FilenameGUID": $scope.attachedFile[i].fileGUID,
                "Filename": $scope.attachedFile[i].fileName,
                "Group": $scope.attachedFile[i].fileGroup,
                "Description": $scope.attachedFile[i].fileDescription,
                "UploadDate": uploadGregorianDate()                    
            });
        }
    }
};

And now everything is fine.

这篇关于用angularjs在本地驱动器上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！