Question

您好我想上传图片（以及其他表单详细信息）并使用jsp和servlet预览它们。我能够上传部分，但无法获得，如何在前端预览图像。

我正在使用YUI来实现它。实际上我正在尝试重用一个在PHP中实现的示例。我在这里附上我的Servlet代码。在这个'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>

我无法得到回复，有人可以帮忙吗？

谢谢，阿米特

Answer 1

试试这个：

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

Answer 2

由于安全限制，您无法在前端上预览上传图片

Answer 3

如果您已经能够将图像上传到服务器的文件夹中，则可以在页面中使用图像控件轻松显示图像。让该文件夹成为临时文件夹，您可能希望在上传完成后将其清空。然后，首先将文件上传到临时文件夹，然后将其显示给用户。如果用户取消操作，您可以从文件夹中删除该文件。

但请记住，这不是我们通常可视化的真实图像预览。但由于这模仿了图像预览，因此可能是一种选择。

Answer 4

我不知道YUI，所以我不能详细说明这一点，但我至少可以说你的逻辑中存在一些缺陷：你试图将图像的整个二进制内容写回来对ajax的回应。这不会起作用。在HTML中，您只能使用<img>元素显示图像，src属性应指向有效的网址。类似的东西：

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

要实现此目的，只需将映像存储在本地磁盘文件系统或服务器端的数据库中，并在ajax响应中提供客户端可以访问映像的URL。让ajax成功处理程序创建一个DOM元素<img>，并用获取的URL填充其src值。

您需要创建一个Servlet来监听此网址，并通过InputStream从本地磁盘文件系统获取FileInputStream图像，或者通过{{从数据库获取图像1}}并将其写入响应的ResultSet#getBinaryStream()，以及至少OutputStream的正确响应标头集。您可以找到here这样一个servlet的示例。

那就是说，你真的不需要Java 2D API。 content-type和Image只会不必要地增加很多开销。只需将其作为ImageIcon并将其以通常的Java IO方式写入响应的InputStream。

使用预览上传图像

4 个答案: