доступ к файлам для чтения веб-изображений

Код ниже работает хорошо, если я использую его для выбора изображения с локального компьютера:

var outerImg=document.getElementById("img");

    if(!outerImg.files[0])
    {
        return;
    }
    var imgdat=outerImg.files[0];
    var reader = new FileReader();
    reader.onload=function(event)
    {
        var img=new Image; 
            img.onload=function()
        {
            doThings(this);
        }
            img.src=event.target.result;
            alert(img.src);
    }
    reader.readAsDataURL(imgdat);

Мой вопрос: можно ли использовать аналогичный способ доступа к веб-изображению? Допустим, у меня есть 10 изображений, я отображаю их с помощью <img src="xxx.jpg" id="img1"> и использую читатель для доступа к ним?


person user1042911    schedule 25.08.2012    source источник
comment
Если это Javascript (не убивайте меня, если это не так), добавьте тег :)   -  person Serguei Fedorov    schedule 25.08.2012
comment
Если у вас есть доступ к библиотеке JQuery, просто выполните $(myDiv).append(‹img src='XXX.jpg' id='img1'); убедитесь, что у вас есть div, чтобы поместить его.   -  person Serguei Fedorov    schedule 25.08.2012
comment
Привет, ты имеешь в виду, что это возможно? пока мы используем jquery? на самом деле веб-изображение взято с моего сервера, который хранится внутри MySQL, и я хотел бы разрешить пользователю доступ к каждому изображению для обработки изображений.   -  person user1042911    schedule 25.08.2012
comment
Если этот код прикреплен к веб-странице (внутри веб-страницы), создайте тег div или какой-либо элемент, который будет содержать ваше изображение. После загрузки изображения поместите его в тег div, используя предоставленный код. Это выполняется через веб-сайт, верно?   -  person Serguei Fedorov    schedule 25.08.2012
comment
Да! правильный. Я только что попробовал изображение внутри id=myDiv, используя ваш код. Однако он показывает мне Uncaught TypeError: Cannot read property '0' of undefined . Извините, я новичок в HTML5 API, пожалуйста, сообщите.   -  person user1042911    schedule 25.08.2012
comment
JQuery — это не HTML5, это библиотека, которая упрощает многие аспекты Javascript, делая разработку веб-сайтов быстрее и проще. Вы должны импортировать библиотеку. Добавьте следующее в свой тег заголовка ‹script src=//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js›‹/script› также убедитесь, что на вашей странице есть тег Div. . Здесь, позвольте мне опубликовать это как ответ, чтобы вам было легче увидеть.   -  person Serguei Fedorov    schedule 25.08.2012
comment
да, изображение может отображаться правильно с помощью jQuery, и я знаю, что это такое. Конечно, я также подключаю библиотеку. Теперь изображение находится внутри #myDiv, и это нормально. Итак, как я могу получить доступ к этому изображению с помощью FileReader?   -  person user1042911    schedule 25.08.2012
comment
попробуйте это var externalImg=$(#img1);   -  person Serguei Fedorov    schedule 25.08.2012
comment
Uncaught TypeError: невозможно прочитать свойство '0' неопределенной той же ошибки. Я заменяю var externalImg=document.getElementById(img1); в var externalImg=$(#img1);   -  person user1042911    schedule 25.08.2012
comment
хм... ошибка возникла при изменении кода или так было раньше?   -  person Serguei Fedorov    schedule 25.08.2012
comment
для локального файла загрузки это работает хорошо. Просто, если я хочу получить доступ к веб-изображению, он показывает эту ошибку. Поэтому я подозреваю, что программа для чтения файлов не может получить доступ к веб-изображению. не так ли?   -  person user1042911    schedule 25.08.2012
comment
Ааа, хорошо. Дерп, я идиот. Вы не можете выбрать элемент страницы и загрузить его, потому что элементы страницы не являются фактическими файлами, а являются разметкой. Вы можете попробовать и посмотреть, сможете ли вы получить расположение файла, например, mysite/myImg.jpg или полный URL-адрес.   -  person Serguei Fedorov    schedule 25.08.2012
comment
stackoverflow.com/ вопросов/788957/ это поможет вам получить полную информацию о жизненном местоположении файла   -  person Serguei Fedorov    schedule 25.08.2012
comment
теперь я использую var img = document.getElementById('img1'); оповещение (img.getAttribute ('источник')); // foo.jpg предупреждение(img.src); // var externalImg=document.getElementById(img1); вар externalImg=$(img.src); он показывает xx.com/abc.jpg‹--my фактическое местоположение, правильный! но Uncaught TypeError: невозможно прочитать свойство '0' неопределенного значения все еще существует   -  person user1042911    schedule 25.08.2012
comment
вар externalImg=$(img.src); вероятно, вызывает это. Попытка удалить $ и ( ). Инкапсуляция $ ищет элемент на странице, даже если вы передаете исходное местоположение изображения.   -  person Serguei Fedorov    schedule 25.08.2012
comment
я устал, мне нужно переписать var externalImg=img.src; все еще есть проблема с «0» .... и я очень ценю ваше продолжение и прошу прощения за ваше время.   -  person user1042911    schedule 25.08.2012
comment
Не могли бы вы разместить свой код на jsfiddle.net? Я мог бы отладить и точно сказать вам, в чем проблема.   -  person Serguei Fedorov    schedule 25.08.2012
comment
о, я никогда не пробовал jsfiddle.net и не уверен, что могу правильно или нет. вы можете отредактировать его jsfiddle.net/CaRdB/4   -  person user1042911    schedule 25.08.2012
comment
Попробуйте это jsfiddle.net/CaRdB/33   -  person Serguei Fedorov    schedule 25.08.2012
comment
ни ошибки, ни ответа. Как я могу знать, что это работает? Могу ли я сбросить данные для проверки?   -  person user1042911    schedule 25.08.2012
comment
Если средство чтения файлов что-то возвращает, вы всегда можете предупредить результат.   -  person Serguei Fedorov    schedule 25.08.2012
comment
jsfiddle.net/CaRdB/38 попробуйте это. Я пытаюсь вывести результат из предупреждения (imgdat +имгдат); показывает правильную ссылку, но предупреждает (imgsrc=+img.src); нет ответа, и на моем веб-сервере отображается неопределенное изображение. странный   -  person user1042911    schedule 25.08.2012


Ответы (1)


В элементе изображения нет свойства files. Это должно объяснить ошибку javascript, которую вы получаете, прежде чем вы даже доберетесь до бита FileReader.

person brains911    schedule 25.08.2012
comment
привет, я подозреваю, что это тоже вызывает проблемы. Так можно ли получить доступ к изображению с помощью FileReader? - person user1042911; 25.08.2012
comment
Я не уверен, но после того, как вы исправите ошибку js, вы можете попробовать использовать элемент img напрямую, как это reader.readAsDataURL(outerImg); - person brains911; 25.08.2012
comment
хм.. попробуйте отметить [0] материал и использовать ваше предложение, нет ответа. - person user1042911; 25.08.2012
comment
Тогда я предполагаю, что ответ на ваш вопрос - нет. - person brains911; 25.08.2012
comment
Таким образом, вы пришли к выводу, что FileReader может работать только с локальным файлом, но не с файлом xx. - person user1042911; 25.08.2012
comment
Это только мое предположение. Я ничего не делал, кроме как посмотреть здесь: MDN: FileReader - person brains911; 25.08.2012
comment
по вашей ссылке говорится, что веб-приложения асинхронно считывают содержимое файлов (или буферов необработанных данных), хранящихся на компьютере пользователя, поэтому, похоже, они могут получить доступ только к локальному файлу. В этом смысле, можем ли мы сначала загрузить изображение из Интернета, а затем загрузить его в процесс? если да, то как? - person user1042911; 25.08.2012