Загрузить изображение с предварительным просмотром - PullRequest
0 голосов
/ 22 декабря 2009

Привет! Я хотел загрузить изображения (вместе с другими деталями формы) и просмотреть их, используя jsp и сервлеты. Я могу выполнить загрузку, но не могу понять, как просмотреть изображения в веб-интерфейсе.

Я использую YUI для его реализации. На самом деле я пытаюсь повторно использовать пример, который реализован в PHP. Я прилагаю свой код сервлета здесь. В этом поле 'completeFileName' будет заполнено после завершения загрузки.

   protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {            

            if(completeFileName == null) {
                PrintWriter pout = response.getWriter();
                JSONObject obj = new JSONObject();
                obj.put("hasError", new Boolean(true));
                pout.println(obj.toString());
            }
            try {

                OutputStream out = response.getOutputStream();
                Image image = Toolkit.getDefaultToolkit().getImage(completeFileName);
                ImageIcon icon = new ImageIcon(image);
                int height = icon.getIconHeight();
                int width = icon.getIconWidth();
  BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
                ImageIO.write(bi, "jpg", out);
                out.flush();                
            } catch (Exception ex) {

            }

Мой JSP-код выглядит так:

<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/connection/connection.js"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/utilities/utilities.js"></script>
        <script type="text/javascript">
            var $E = YAHOO.util.Event;
            var $  = YAHOO.util.Dom.get;
            var $D = YAHOO.util.Dom;
            function init(){
                var listImageHandler = {
                    success:function(o) {
                        var r = eval('(' + o.responseText + ')');
                        if(!r.hasError) {
                            var imageListCon = $('imageListCon');
                            var img = document.createElement('img');
                            //img.src = 'image.php?i=' + r.imageList[i];
                            img.src = r.fileName;
                            imageListCon.appendChild(img);
                        }
                    }
                };
                var onUploadButtonClick = function(e){
                    var uploadHandler = {
                        upload: function(o) {
                            //console.log(o.responseText);
                            $D.setStyle('indicator', 'visibility', 'hidden');
                            var r = eval('(' + o.responseText + ')');
                            if(r.hasError){
                                var errorString = '';
                                for(var i=0; i < r.errors.length; i++){
                                    errorString += r.errors[i];
                                }
                                alert(errorString);
                            }else{
                                YAHOO.util.Connect.asyncRequest('GET', 'UploadFileServlet', listImageHandler);
                            }
                        }
                    };
                    $D.setStyle('indicator', 'visibility', 'visible');
                    //the second argument of setForm is crucial,
                    //which tells Connection Manager this is an file upload form
                    YAHOO.util.Connect.setForm('testForm', true);
                    YAHOO.util.Connect.asyncRequest('POST', 'UploadFileServlet', uploadHandler);

                };
                $E.on('uploadButton', 'click', onUploadButtonClick);
                YAHOO.util.Connect.asyncRequest('GET', 'UploadFileServlet', listImageHandler);
            }

            $E.on(window, 'load', init);
        </script>        
    </head>
    <body>
        <form action="UploadFileServlet" method="POST" enctype="multipart/form-data" id="testForm">        
        <input type="file" name="testFile"><br>
        <input type="button" id="uploadButton" value="Upload"/>
        </form>
        <div class="restart"><a href="UploadFileServlet?redo=1">Redo It</a></div>
        <div  style="visibility:hidden; margin-bottom:1.5em;" id="indicator">Uploading... <img src="indicator.gif"/></div>
        <div id="imageListCon">

        </div>
    </body>

Я не могу получить ответ, может кто-нибудь помочь в этом, пожалуйста?

Спасибо, Amit

Ответы [ 4 ]

1 голос
/ 22 декабря 2009

Из-за ограничений безопасности вы не можете предварительно просмотреть изображение на внешнем интерфейсе до до загрузки

1 голос
/ 22 декабря 2009

Если вы уже можете загрузить изображение в папку на своем сервере, вы можете легко отобразить изображение с помощью элемента управления изображением на своей странице. Пусть эта папка будет временной папкой, которую вы можете очистить после завершения загрузки. Затем вы сначала загружаете файл во временную папку и отображаете его для пользователя. Если пользователь отменяет операцию, вы можете удалить файл из папки.

Но помните, что это не будет реальный предварительный просмотр изображения, как мы обычно визуализируем. Но так как это имитирует предварительный просмотр изображения, это может быть выбор.

1 голос
/ 22 декабря 2009

попробуйте это:

http://pixeline.be/experiments/jqUploader/

0 голосов
/ 23 декабря 2009

Я не знаю YUI, поэтому я не могу вдаваться в подробности по этому поводу, но я по крайней мере могу сказать, что в вашей логике есть несколько недостатков: вы пытаетесь записать все двоичное содержимое изображения обратно на ответ Аякса. Это не сработает. В HTML вы можете отображать изображения только с использованием элемента <img>, атрибут которого src должен указывать на действительный URL-адрес. Что-то вроде:

<img src="/images/uploadedimage.jpg">

Для этого просто сохраните образ в локальной файловой системе диска или в базе данных на стороне сервера и укажите в ответе ajax URL-адрес, по которому клиент может получить доступ к образу. Позвольте обработчику успеха ajax создать элемент DOM <img> и заполнить его значение src полученным URL.

Вам нужно будет создать Servlet, который будет прослушивать этот URL-адрес и получить изображение в виде InputStream из файловой системы локального диска по FileInputStream или из базы данных по ResultSet#getBinaryStream() и записать его в OutputStream ответа, вместе с правильным набором заголовков ответа, по крайней мере, content-type. Вы можете найти здесь пример такого сервлета.

Тем не менее, вам действительно не нужен Java 2D API для этого. Image и ImageIcon только излишне увеличивают накладные расходы. Просто получите его как InputStream и запишите его обычным способом ввода-вывода Java в OutputStream ответа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...