1

現在、私はeclipsを使用して完全にhtml+jspであるWebサイトに取り組んでいます。今私の問題はファイルをアップロードすることです。ローカルマシンからhtmlページに画像を表示することはできますが、その画像をmysqlデータベースに保存してから、メインのWebページに表示したいと思います。

最初のページに2つのページがあるとします。オペレーターがローカルマシンから任意の画像を選択すると、同じページの画像ビューにも表示されます。オペレーターが画像のアップロードをクリックすると、画像がWebサイトに表示されます。

前に述べたように、私はオペレーターのページに画像を表示することができますが、それをmysqlデータベースに保存してからWebサイトで取得する方法。

このタスクは.jspファイルでのみ実行できますか？

これがローカルマシンからの画像を表示するための私のコードです、

  <div class="file">
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<div id="imgThumbId"></div>
</a>
</li>
</ul>
<form action="advertise.jsp">
<fieldset>
        <legend>Upload Image</legend>
        <label for="file">Choose photo</label>
        <input type="file" name="file" id="file" /><br/>
        <input type="submit" name="upload" id="upload" value="Upload photo"  onclick="PreviewRecipeImage();"/>
    </fieldset>
    </form>
    </div>

これがjavascriptコードです

<script type="text/javascript">



 function PreviewRecipeImage(){


var file = document.getElementById('file').files[0]; // create img tag for selected recipe image file
var img = document.createElement("img");
img.id = "imgid";
img.classList.add("obj");
img.file = file;
//img.width = 90;
//img.height = 90;
//ClearThumb1Image();

 document.getElementById('imgThumbId').appendChild(img);// append img tag to recipe image tag

var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);


}
</script>
4

1 に答える 1

0 
<div class="file" >
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<div id="imgThumbId"></div>
</a>
</li>
</ul>
<form action="advertise.jsp" enctype="multipart/form-data">
<fieldset>
        <legend>Upload Image</legend>
        <label for="file">Choose photo</label>
        <input type="file" name="file" id="file" /><br/>
        <input type="submit" name="upload" id="upload" value="Upload photo"  onclick="PreviewRecipeImage();"/>
</fieldset>
</form>
</div>

フォームで使用enctype="multipart/form-data"します。

multipart/form-data を処理するには、次のサーブレット コードを使用します。また、Apache Commons FileUploadパッケージをコードにインポートします。

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    try {
        List<FileItem> items = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);
        for (FileItem item : items) {
            if (item.isFormField()) {
                // Process regular form field (input type="text|radio|checkbox|etc", select, etc).
                String fieldname = item.getFieldName();
                String fieldvalue = item.getString();
                // ... (do your job here)
            } else {
                // Process form file field (input type="file").
                String fieldname = item.getFieldName();
                String filename = FilenameUtils.getName(item.getName());
                InputStream filecontent = item.getInputStream();
                // ... (do your job here)
            }
        }
    } catch (FileUploadException e) {
        throw new ServletException("Cannot parse multipart request.", e);
    }

    // ...
}
于 2012-11-17T07:24:52.380 に答える