задача такая: необходимо реализовать выбор файла на компьютере посетителя WEB-страницы, его загрузку на сервер и отображение URL-ссылки на файл в текстовом поле. пишу сюда, потому что несмотря на распространённость проблемы, я долго искала её решение
1. создать визуальный xml-элемент
//кнопка и текстовая метка для выбора файла. ебатория с form связана с тем, что мы хотим остаться на этой странице, а не переходить на другую
<div>
<form enctype="multipart/form-data" action="uploader.jsp" method="POST" target="hfrm">
<input name="fileupload" type="file" id="upload" g:jsClass="jsFile.SelectFile" accept="CGM,EPS,GIF,JPEG,PBM,PS,TIFF,XWD"/>
<input type="submit" value="Загрузить изображение" /> //по нажатию на эту кнопку происходит загрузка на сервер (submit)
</form>
<iframe id="hfrm" name="hfrm" style="width:0px; height:0px; border:0px"></iframe>
</div>
//выходное текстовое поле, в котором должен отобразиться URL, и его заголовок
<div id="element_id" name="fileName" style="border: none;">
<div>
<label id="label_id">Ссылка на файл (URL)</label>
</div>
<div>
<input id="txt_id" maxlength="2048" size="60" type="text">
</div>
</div>
выглядит вот так
2. Реализовать в js-файле jsFile реакцию на изменение выбора файла, предварительно прописать путь к файлу в jsp-файле текущей страницы:
<script type="text/javascript" src="<%=request.getContextPath()%>/путь к js-файлу/jsFile.js"></script>
//текст файла. скорее всего не будет работать так как он неполный.
dojo.require("dijit.Dialog");
/**
* @class supports liza's (that is me) special file selection
* @name jsFile.SelectFile
*/
dojo.provide("jsFile.SelectFile");
dojo.declare("jsFile.SelectFile",null,{
//при изменении выбора файла в текстовом поле снизу отображался его полный путь
onInputChanged: function() {
document.getElementsByName('fileName')[0].getElementsByTagName('input')[0].value = 'http://'+window.location.host+'/путь от корневого каталога к папке с изображениями/'+dojo.trim(this.htmlElement.value);
},
});
3. Создать файл uploader.jsp и поместить его в каталог, откуда запускается текущая страница.
текст файла (на java):
<%@ page import="java.io.*" %>
<%
//to get the content type information from JSP Request Header
String contentType = request.getContentType();
//here we are checking the content type is not equal to Null and as well as the passed data from mulitpart/form-data is greater than or equal to 0
if ((contentType != null) && (contentType.indexOf("multipart/form-data") >= 0)) {
DataInputStream in = new DataInputStream(request.getInputStream());
//we are taking the length of Content type data
int formDataLength = request.getContentLength();
byte dataBytes[] = new byte[formDataLength];
int byteRead = 0;
int totalBytesRead = 0;
//this loop converting the uploaded file into byte code
while (totalBytesRead < formDataLength) {
byteRead = in.read(dataBytes, totalBytesRead,
formDataLength);
totalBytesRead += byteRead;
}
String file = new String(dataBytes);
//for saving the file name
String saveFile = file.substring(file.indexOf("filename=\"") + 10);
saveFile = saveFile.substring(0, saveFile.indexOf("\n"));
saveFile = saveFile.substring(saveFile.lastIndexOf("\\") + 1,saveFile.indexOf("\""));
saveFile = "C:\\Program Files\\Apache Software Foundation\\Tomcat 6.0\\webapps\\geoportal\\images\\"+saveFile;
int lastIndex = contentType.lastIndexOf("=");
String boundary = contentType.substring(lastIndex + 1,contentType.length());
int pos;
//extracting the index of file
pos = file.indexOf("filename=\"");
pos = file.indexOf("\n", pos) + 1;
pos = file.indexOf("\n", pos) + 1;
pos = file.indexOf("\n", pos) + 1;
int boundaryLocation = file.indexOf(boundary, pos) - 4;
int startPos = ((file.substring(0, pos)).getBytes()).length;
int endPos = ((file.substring(0, boundaryLocation)).getBytes()).length;
// creating a new file with the same name and writing the content in new file
FileOutputStream fileOut = new FileOutputStream(saveFile);
fileOut.write(dataBytes, startPos, (endPos - startPos));
fileOut.flush();
fileOut.close();
}
%>
