Question

我想点击img标签上传图片。当用户点击图片时，文件输入标签会调用，用户选择任何图片并将此图片设置为点击的img标签。

我将如何实现。任何人都可以告诉我。

Answer 1

您可以通过使用jquery触发click事件来实现此目的。首先要做的是。

创建图像标记（我假设您要在此标记上放置无图片图像）
在页面的某处创建一个文件输入标记，最好是在上面的图像标记下。
隐藏文件输入（使用css将显示设置为无）;
使用jquery触发点击“无图片”图片的点击处理程序的文件输入。
使用您的文件输入标记照常处理您的上传。

还可以获得this角度模块，使文件上传变得容易

HTML

<img src="no_image.png" ng-click="triggerUpload()" class="image-holder"/> <input type="file" ng-file-select="uploadImage($files)" style="display:none" id="fileInput" name="filedata"/>

现在触发隐藏文件输入控件

THE JAVASCRIPT

$scope.triggerUpload=function()
{
 var fileuploader = angular.element("#fileInput");
    fileuploader.on('click',function(){
        console.log("File upload triggered programatically");
    })
    fileuploader.trigger('click')
}

$scope.uploadImage=function(selectedfiles)
{
    $upload.upload({
       url:"link to server script",
       file:selectedFiles
    })
}

有关模块的演示，请参阅this

Answer 2

@shanks解决方案没有解决将图像设置为点击图像的问题。我修改了代码以解决相同问题。

<强> HTML

<input type="file" ng-file-select="uploadImage($files)" id="file-input" name="filedata"/> 
<img src="no_image.png" ng-click="triggerUpload()" id="imageId"/>

<强> JAVASCRIPT

在支持File API的浏览器中，您可以使用FileReader构造函数在用户选择文件后读取文件。支持的浏览器 - IE 10 +，Safari 6.0.2 +，Chrome 7 +，Firefox 3.6 +，Opera 12.02 +。

$scope.triggerUpload=function() {
    var fileuploader = angular.element("#file-input");
    fileuploader.on('click',function(){
        console.log("File upload triggered programatically");
    });
    fileuploader.on('change', function(e) {
        var reader = new FileReader();
        reader.onload = function () {
            document.getElementById('imageId').src = reader.result;
        }

        var files = fileuploader[0].files;
        reader.readAsDataURL(files[0]);

    });
    fileuploader.trigger('click')
}

上传代码与@shanks解决方案相同

$scope.uploadImage=function(selectedfiles)
{
    $upload.upload({
       url:"link to server script",
       file:selectedFiles
    })
}

Answer 3

您可以尝试ng-file-upload https://github.com/danialfarid/ng-file-upload

创建img标记
在img标签中直接使用指令

Answer 4

试试这个

<img url="#Your image url" alt="click here to add file upload" />
<div id="fileUpload" />

和脚本

$('img').click(function () {
AddFileUpload();
 });

function AddFileUpload() {
    $('#fileUpload').append('<input type="file"/>');
}

Demo

点击图片上传图片

4 个答案: