Heim > Artikel > Web-Frontend > Einfache Implementierung von Ajax zum Hochladen von Bildern und deren Vorschau
Einfache Implementierung von Ajax zum Hochladen von Bildern und deren Vorschau
- 亚连Original
- 2018-05-23 14:30:041542Durchsuche
Jetzt zeige ich Ihnen eine einfache Implementierung von Ajax zum Hochladen von Bildern und deren Vorschau. Lassen Sie mich es jetzt mit Ihnen teilen und es allen als Referenz geben.
1. Verwenden Sie direkt das einfachste Ajax, um Bilder asynchron hochzuladen und eine Vorschau anzuzeigen
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片上传 | cookie</title>
</head>
<body>
file: <input type="file" id="images" name="image" /><br><br>
desc: <input type="text" id="desc" name="desc" /><br><br>
<input type="button" value="upload" onclick="upload();">
<p class="images"></p>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/upload.js"></script>
<script type="text/javascript">
function upload() {
$.ajaxFileUpload({
url : 'upload.htm',
fileElementId : 'images',
dataType : 'json',
data : {desc : $("#desc").val()},
success : function(data) {
var html = $(".images").html();
html += '<img width="100" height="100" src="/HotelManager/upload/' + data.url + '">'
$(".images").html(html);
}
})
return false;
}
</script>
</body>
</html>Servlet:
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
String path = request.getServletContext().getRealPath("/upload");
String name = null;
try {
List<FileItem> items = upload.parseRequest(request);
for (FileItem item : items) {
if(item.isFormField()){
System.out.println(item.getFieldName() + ": " + item.getString());
} else {
name = item.getName();
item.write(new File(path,name));
}
}
PrintWriter out = response.getWriter();
out.print("{");
out.print("url:\"" + name +"\"");
out.print("}");
} catch (Exception e) {
e.printStackTrace();
}
}Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird. Verwandte Artikel:
Zusammenfassung der Datei-Upload-Techniken basierend auf Ajax-HTML
Ein einfaches Beispiel für die Verwendung von XPath in dom4j
Eine kurze Diskussion über die DatePicker-Datumsbereichsauswahl von Bootstrap
Das obige ist der detaillierte Inhalt vonEinfache Implementierung von Ajax zum Hochladen von Bildern und deren Vorschau. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!