单击图像时如何添加图像

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);
});
});

---

可视化

在点击添加X到图像

---

我该如何实现？

Answer 1

这是一个入门的基本jsFiddle： http : //jsfiddle.net/n0fLd7w2/2/

基本上，您希望容器元素具有position: relative和子元素具有position: absolute 。

从那里，您可以监听容器div上的click事件，并使用offsetX和offsetY设置子元素的top和left样式。

您可以在此处进行更多操作（例如，使用子级的宽度和高度将其居中放置在鼠标光标上），但是我将其保持简单，以便您可以了解基本信息。

Answer 2

您可以在红色“ X”图像上添加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;