Question

目标：

点击<img>代替<input type="file">上传图片（将有3个上传，因此在页面加载时只有3个占位符，然后点击任意占位符后，您选择一个文件，这个文件在各个占位符中显示）。我现在拥有的：

HTML：

<div class="image-upload">
   <label for="file_input1">
       <img id="send_photo_img1" src="assets/images/index2.png"/>
   </label>
   <input id="file_input1" type="file"/>
</div>

CSS：

.image-upload > input
{
    display: none;
}

.image-upload img
{
    display: inline-block;
    margin-right:6px;
    width: 90px;
    height: 90px;
    cursor: pointer;
}

Jquery的：

function readURL(input) {

if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#send_photo_img1')
            .attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
}
}    

$("#send_photo_img1").change(function(){
    readURL("#file_input1");
});

虽然像plupload.js或dropzone.js这样的脚本可以做到这一点，但是他们也有很多我不需要的东西（即用户界面不太适合我的需要或许多代码选项）不是真的需要，而是占用空间），所以试图在我当前需要的范围内实现这个。

当前代码只允许我选择所需的img，但不显示它。目前，一旦选择了图像，加载标志会显示一段时间，但之后不会发生任何事情。 Chrome F12中也没有错误输出。

Answer 1

想出来，结果很简单：

<强> HTML

<div class="img_upload">
    <img class="send_photo_img" id="send_photo1_img" src="assets/images/index2.png"/>
    <input id="send_photo1" name="send_photo1" class="send_photo_input" type="file"/>
</div>
<div class="img_upload">
    <img class="send_photo_img" id="send_photo2_img" src="assets/images/index2.png"/>
    <input name="send_photo2" class="send_photo_input" type="file"/>
</div>

拥有尽可能多的img。

此外，使用CSS，您隐藏<input>并在其上触发<input>点击<image>，一旦它抓住.img_upload input { display: none; }上的点击：

<强> CSS

$(".img_upload img").click(function(){
        img = $(this);
        input = img.next(".send_photo_input");
        var newUrl;

        input.trigger("click");
        input.change(function(){
            newUrl = resize_and_draw(this, img.width());
            url.push(newUrl);
    });
});

JS （触发点击）

if (input.files && input.files[0] && /\.(jpe?g|png|gif)$/i.test(input.files[0].name)) {

    var reader = new FileReader();
    reader.onload = function (e) {

        var img = new Image();
        img.src = reader.result;
        img.onload = function() {

          canvas = document.createElement( 'canvas');
            canvas.width = img.naturalWidth;   
            canvas.height = img.naturalHeight;
            context = canvas.getContext('2d');
            context.drawImage( img, 0, 0, img.naturalWidth, img.naturalHeight );

                targetHeight = targetH;
            targetWidth = img.naturalWidth * targetHeight / img.naturalHeight;

            //resize
            resample_hermite(canvas, img.naturalWidth, img.naturalHeight, targetWidth*2, targetHeight*2);
            url = canvas.toDataURL("image/png");
            $(input).prev(".send_photo_img").attr('src', url);

        }     
    }

    reader.readAsDataURL(input.files[0]);

    return url;
}
}

最后，你用HTML5 canvas完成剩下的工作（现在除了Opera Mini之外几乎任何东西都支持它（2017年10月初全球用户份额约为2,81％）。

您可能也有兴趣在客户端调整图像大小（以保持带宽，降低加载速度等），所以下面是完整的代码：

function resize_and_draw（input，targetH）{

$response = $this->get('/');

$allCompanies = Company::all();
$response->assertViewHas('allCompanies', $allCompanies);

希望这有助于实现目标。干杯！

上传img（通过点击<img/>，而不是<input type =“file”/>），在以下<img/>中显示，客户端调整大小

1 个答案: