Question

我的多部分表单中有一个简单的文件上传：

我想要做的是定制它，使它看起来像这样：

虽然我的第一个解决方案工作正常 - 下面是我的代码：

HTML片段

            <div>
                <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)" />
            </div>

Controller snippet：

$scope.uploadFile = function(files) {
    var fd = new FormData();
    console.log('test', files[0]);
    //Take the first selected file
    fd.append("file", files[0]);

    $http.post(uploadUrl, fd, {
        withCredentials: true,
        headers: {
            'Content-Type': undefined
        },
        transformRequest: angular.identity
    }).success('...all right!...').error('..damn!...');

};

我对自定义的控制很少，看起来像第二个例子。

我已经考虑过首先单独创建按钮，然后使用jquery将文件名存储到这样的输入框中：

$（＆＃34;的InputBox＆＃34）的HTML（文件名）;

但我不确定如何以角度进行此操作，或者这是解决问题的正确方法。有任何想法吗？感谢

Answer 1

以下是你如何解决它：

1）创建一个获取文件输入值的指令，并替换输入框中的值。在AngularJS中，DOM元素只能以这种方式操作。

//directive to add input file name in image upload
app.directive('imageupload', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).change(function() {
                // on change update upload file
                  $("#uploadFile").val($(element).val());
            });
        }
    };
});

2）视图中的HTML

            <input id="uploadFile" placeholder="Choose File" disabled="disabled" />
            <div class="fileUpload btn btn-primary">
                <span>Upload</span>
                <input id="uploadBtn" imageupload type="file" onchange="angular.element(this).scope().uploadFile(this.files)" class="upload" />
            </div>
        </div>
    </div>

3）CSS

/* upload */

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

角度相当于JQUERY /文件上传/多部分表单

1 个答案: