Отправка данных из ввода типа "изображение" через Ajax, а не отправку формы

Question

По сути, я хочу использовать ввод изображений, но мне не нужно отправлять форму, чтобы получить результат, я хочу получить координаты X и Y по нажатию на ввод изображения, а затем отправить их через Аякс.

Теперь, Я понимаю, что могу просто поместить ввод изображения в его собственную форму, затем передать в скрытый iframe и проверить результат на интервале (я делаю это для права загрузчика ajax справа сейчас), но, похоже, немного подделка. Я также понимаю, что могу получить положение мыши с помощью javascript с любого щелчка, это не совсем то, о чем я спрашиваю

Могу ли я использовать такой ввод типа изображения? Есть ли способ сделать так, чтобы щелчок на входе изображения просто устанавливал его значение, а затем вызывал некоторый JavaScript для выполнения моего вызова ajax?

Answer 1

Я просматривал свои старые вопросы и увидел, что на этот вопрос никогда не отвечали адекватно.Я не помню, понял ли я это «когда-нибудь», но я знаю, как это сделать сейчас.

Просто проверьте offsetX и offsetY события click ввода изображения.Он должен быть смещен к вводу изображения, на котором вы щелкнули.

$('input[type=image]').click(function(e) {
     //alert the clicked position.
     alert(e.offsetX + ',' + e.offsetY);
});

Answer 2

Посмотрите здесь: http://jsfiddle.net/pfLtm/

Как видите, этот код может быть легко изменен на что-то вроде этого:

$("#MyInput").click(function(event) {
    var oPos = $(this).position();
    $(this).attr("mouse_x", (event.pageX - oPos.left));
    $(this).attr("mouse_y", (event.pageY - oPos.top));
    return false;
});

Это сохранит позицию X и Y щелчка как атрибуты самого элемента. Контрольный пример: http://jsfiddle.net/pfLtm/1/

Вместо возврата false вы можете, например, вызвать AJAX-вызов.