Question

我想在单击图像时在另一个图像上添加红色X（图像）。

HTML：

<input type='file' onchange="readURL(this);" />
<div id="divfuerimage" height="300px" width="300px">
   <img id="blah" src="#" alt="your image" style="cursor: pointer" />
</div>

JQuery的：

function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
        $('#blah').attr('src', e.target.result).width(300).height(300)
        $('#blah').mouseenter(function(e) { /*code for mouseenter*/ });
    };
    reader.readAsDataURL(input.files[0]);
}
}
$(document).ready(function() {
$('#blah').on('click', function(e) { /*onclick add Image*/
    var offset = $(this).offset(),
        pageX = e.pageX,
        pageY = e.pageY;
    var imgX = pageX - offset.left,
        imgY = pageY - offset.top;
    alert(imgX + ' , ' + imgY);
});
});

可视化

enter image description here

点击添加X到图像

我怎样才能做到这一点？

Answer 1

这是帮助您入门的基本jsFiddle：http://jsfiddle.net/n0fLd7w2/2/

基本上，您希望容器元素包含position: relative，子元素包含position: absolute。

从那里您可以听到容器div上的点击事件，并使用offsetX和offsetY在您的子元素上设置top和left样式。< / p>

您可以在此处执行更多操作（例如使用子宽度和高度将其置于鼠标光标中心），但我保持简单，以便您可以看到基础知识。

Answer 2

你可以在Red＆＃39; X＆＃39;上添加一个css。图片。看看

       $("X_image").css({'position':'absolute','z-index':99999,"top":imgY,"left":imgX});

Answer 3

你可以使用javascript和ajax上传图片，我希望下面的代码对你有用。

$(".case_attachment_file").live('change', function () {
    var current_id = $(this).attr("id");
    var input = document.getElementById(current_id), formdata = false;
    formdata = new FormData();

    var file_name = $("#" + current_id).val();
    if (file_name != '') {
        if (file_name.substr((file_name.lastIndexOf('.') + 1)) != 'jpg' && file_name.substr((file_name.lastIndexOf('.') + 1)) != 'jpeg' && file_name.substr((file_name.lastIndexOf('.') + 1)) != 'pdf' && file_name.substr((file_name.lastIndexOf('.') + 1)) != 'doc' && file_name.substr((file_name.lastIndexOf('.') + 1)) != 'docx') {
            alert("The file " + file_name + " cannot be uploaded. Only files with these extensions are allowed: jpg, jpeg, pdf, doc, docx.");
            $("#" + current_id).val('');
            return false;
        }
    }

    var i = 0, len = this.files.length, img, reader, file;
    for (; i < len; i++) {
        file = this.files[i];
        if (window.FileReader) {
            reader = new FileReader();
            reader.readAsDataURL(file);
        }
        if (formdata) {
            formdata.append("images", file);
        }
    }

    if (formdata) {
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function (result) {
                alert(result);
            }
        });
    }
});

下面是upload.php代码

if (isset($_FILES['images']['name']) && !empty($_FILES['images']['name'])) {
        $path = YiiBase::getPathOfAlias('webroot');
        $image_data = $_FILES['images']['name'];
        $extension = substr($image_data, strrpos($image_data, '.') + 1);
        $file_name = rand(98989899999, 8888899999) . "." . $extension;
        $upload_path = $path . '/upload/' . $file_name;
        move_uploaded_file($_FILES['images']['tmp_name'], $upload_path);
    }

    echo $file_name;
    die;

单击图像时如何添加图像

3 个答案: