Kürzlich entwickle ich eine Weboberfläche, die Bilder auf den Server hochladen kann. Nachfolgend werde ich die Anforderungen und Implementierungsideen sowie den Ajax-Quellcode mitteilen. Freunde, die sich für Ajax und Spring interessieren um die Funktion Datei-Upload zu implementieren!
Entwickeln Sie aufgrund der Projektanforderungen eine Webformularseite, die Bilder auf den Server hochladen kann.
1. Anforderungen
Webformularseite, Sie können Bilder und andere Textinformationen über das Formular hochladen.
2. Der Prozess des Hochladens von Bildern
Ich habe diese Art von Seite noch nie gemacht, also habe ich nach Informationen gesucht. Es hat sich herausgestellt, dass es üblich ist, das Bild zunächst in ein Dateiverzeichnis auf der Serverseite hochzuladen und der Server den Speicherpfad des Bildes an die Rezeption zurückzugeben. Anschließend übermittelt die Rezeption den Bildspeicherpfad und andere Formulare Informationen an den Server und alle Formularinformationen werden in der Datenbank gespeichert.
3. Methode
Aufgrund der Anforderungen des Projekts stelle ich hier zwei Methoden zum Hochladen von Bildern vor. Die erste ist die Verwendung von Ajax Um ein Bild direkt hochzuladen, müssen Sie das Bild zunächst an der Rezeption in kleinere Dateien schneiden und die Bilder dann mit Ajax auf den Server hochladen. (Methode 2 eignet sich zum Hochladen größerer Dateien.) Im Folgenden werde ich die beiden Methoden jeweils vorstellen.
Methode 1:
1 HTML-Seite direkt hochladen
1 2 3 4 |
|
<input id = "sid" type = "text" name="name" />
<pre name="code" class="html"><input id = "fileImage" type = "file" name="filename" />
<input id = "addressid" type = "hidden" name="address" />
<input id="ajaxsub" type="button" class="button" value="上传图片" onclick="fileUpload()<span style="font-family: Arial, Helvetica, sans-serif;">" /> </span>
<input type="submit" class="button" value="提交表单" /> <input type="reset" class="button" value="重置表单" />
1 |
|
1 |
|
2 js
（1）js使用ajax提供的ajaxfileupload.js库。这个库使用起来还是比较方便的，和普通的ajax函数使用方法几乎相同。首先，需要ajaxfileupload.js库文件。这里需要注意，我之前在网上下载了一个ajaxfileupload.js文件不能用，浪费了很长时间，我直接把js库文件粘贴到这里，方便分享。
// JavaScript Document
// ajax file uplaod
jQuery.extend({
createUploadIframe: function(id, uri)
{
//create frame
var frameId = 'jUploadFrame' + id;
if(window.ActiveXObject) {
var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
if(typeof uri== 'boolean'){
io.src = 'javascript:false';
}
else if(typeof uri== 'string'){
io.src = uri;
}
}
else {
var io = document.createElement('iframe');
io.id = frameId;
io.name = frameId;
}
io.style.position = 'absolute';
io.style.top = '-1000px';
io.style.left = '-1000px';
document.body.appendChild(io);
return io;
},
createUploadForm: function(id, fileElementId)
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
//set attributes
jQuery(form).css('position', 'absolute');
jQuery(form).css('top', '-1200px');
jQuery(form).css('left', '-1200px');
jQuery(form).appendTo('body');
return form;
},
ajaxFileUpload: function(s) {
// TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
s = jQuery.extend({}, jQuery.ajaxSettings, s);
var id = s.fileElementId;
var form = jQuery.createUploadForm(id, s.fileElementId);
var io = jQuery.createUploadIframe(id, s.secureuri);
var frameId = 'jUploadFrame' + id;
var formId = 'jUploadForm' + id;
if( s.global && ! jQuery.active++ )
{
// Watch for a new set of requests
jQuery.event.trigger( "ajaxStart" );
}
var requestDone = false;
// Create the request object
var xml = {};
if( s.global )
{
jQuery.event.trigger("ajaxSend", [xml, s]);
}
var uploadCallback = function(isTimeout)
{
// Wait for a response to come back
var io = document.getElementById(frameId);
try
{
if(io.contentWindow)
{
xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
}else if(io.contentDocument)
{
xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
}
}catch(e)
{
jQuery.handleError(s, xml, null, e);
}
if( xml || isTimeout == "timeout")
{
requestDone = true;
var status;
try {
status = isTimeout != "timeout" ? "success" : "error";
// Make sure that the request was successful or notmodified
if( status != "error" )
{
// process the data (runs the xml through httpData regardless of callback)
var data = jQuery.uploadHttpData( xml, s.dataType );
if( s.success )
{
// ifa local callback was specified, fire it and pass it the data
s.success( data, status );
};
if( s.global )
{
// Fire the global callback
jQuery.event.trigger( "ajaxSuccess", [xml, s] );
};
} else
{
jQuery.handleError(s, xml, status);
}
} catch(e)
{
status = "error";
jQuery.handleError(s, xml, status, e);
};
if( s.global )
{
// The request was completed
jQuery.event.trigger( "ajaxComplete", [xml, s] );
};
// Handle the global AJAX counter
if(s.global && ! --jQuery.active)
{
jQuery.event.trigger("ajaxStop");
};
if(s.complete)
{
s.complete(xml, status);
} ;
jQuery(io).unbind();
setTimeout(function()
{ try
{
jQuery(io).remove();
jQuery(form).remove();
} catch(e)
{
jQuery.handleError(s, xml, null, e);
}
}, 100);
xml = null;
};
}
// Timeout checker
if( s.timeout > 0 )
{
setTimeout(function(){
if( !requestDone )
{
// Check to see ifthe request is still happening
uploadCallback( "timeout" );
}
}, s.timeout);
}
try
{
var form = jQuery('#' + formId);
jQuery(form).attr('action', s.url);
jQuery(form).attr('method', 'POST');
jQuery(form).attr('target', frameId);
if(form.encoding)
{
form.encoding = 'multipart/form-data';
}
else
{
form.enctype = 'multipart/form-data';
}
jQuery(form).submit();
} catch(e)
{
jQuery.handleError(s, xml, null, e);
}
if(window.attachEvent){
document.getElementById(frameId).attachEvent('onload', uploadCallback);
}
else{
document.getElementById(frameId).addEventListener('load', uploadCallback, false);
}
return {abort: function () {}};
},
uploadHttpData: function( r, type ) {
var data = !type;
data = type == "xml" || data ? r.responseXML : r.responseText;
// ifthe type is "script", eval it in global context
if( type == "script" )
{
jQuery.globalEval( data );
}
// Get the JavaScript object, ifJSON is used.
if( type == "json" )
{
eval( "data = " + data );
}
// evaluate scripts within html
if( type == "html" )
{
jQuery("<p>").html(data).evalScripts();
}
return data;
},
handleError: function( s, xhr, status, e ) {
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}
// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
}
});
(2) Rufen Sie dann die Bibliothek ajaxfileupload.js auf und schreiben Sie das Bild-Upload-Skript, hier mit dem Namen ajaxfileuplaod_implement.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
<span style="white-space:pre"> </span>//hiden标签的value值中，方法见下面的writeHide函数
}
},
complete: function(xmlHttpRequest)
{<span style="white-space:pre"> </span>//这里将html中的文件上传标签替换为新的标签，是应为我在开发过程中发现，当ajax执行一次上传操作之后，再使用file标签选择文件时，标签没有反应，<span style="white-space:pre"> </span>//所以暂时使用了这种方法。
inputObject.replaceWith('<input type="file" id="fileImage" name="fileImage" />');
},
error: function (data, status, e)//服务器响应失败处理函数
{
//alert("无法连接到服务器");
}
})
}function writeHide(data){
<span style="white-space:pre"> </span>if($("#addressid").get(0).value == "")
<span style="white-space:pre"> </span>{
<span style="white-space:pre"> </span>$("#addressid").get(0).value = data.newName;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>else
<span style="white-space:pre"> </span>{
<span style="white-space:pre"> </span>$("#addressid").get(0).value = $("#addressid").get(0).value+","+data.newName;
<span style="white-space:pre"> </span>}
}
3 spring.
完成上面两个部分之后，前台的主要工作基本就结束了。我后台使用了spring框架。
首先是springMVC的配置文件：viewspace-servlet.xml
<?xml version="1.0" encoding="UTF-8" ?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.1.xsd">
<!-- 静态资源 -->
<mvc:resources mapping="/js/**" location="/js/" />
<mvc:resources mapping="/css/**" location="/css/" />
<mvc:resources mapping="/image/**" location="/image/" />
<!-- 扫描web包，应用Spring的注解 -->
<context:component-scan base-package="web"/>
<bean id="defaultAnnotationHandlerMapping"
class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />
<bean id="annotationMethodHandlerAdapter"
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />
<!-- 配置视图解析器，将ModelAndView及字符串解析为具体的页面 -->
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver"
p:viewClass="org.springframework.web.servlet.view.JstlView"
p:prefix="/WEB-INF/jsp/"
p:suffix=".jsp"/>
<!-- 使springMVC支持图片上传 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 最大上传尺寸1MB -->
<property name="maxUploadSize" value="10485760"/>
<!-- 默认编码 -->
<property name="defaultEncoding" value="UTF-8" />
<!-- 上传文件的解析 -->
<property name="resolveLazily" value="true" />
</bean>
<!-- SpringMVC在超出上传文件限制时,会抛出org.springframework.web.multipart.MaxUploadSizeExceededException -->
<!-- 该异常是SpringMVC在检查上传的文件信息时抛出来的,而且此时还没有进入到Controller方法中 -->
<bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver" >
<property name="exceptionMappings">
<props>
<!-- 遇到MaxUploadSizeExceededException异常时,自动跳转到/WEB-INF/jsp/error_toobig.jsp页面 -->
<prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">error_fileupload</prop>
</props>
</property>
</bean>
</beans>其中，类“org.springframework.web.multipart.commons.CommonsMultipartResolver”的配置是必须的，否则后台无法收到前台传来的文件。
为了防止文件名中的中文字符传输出现问题，在web.xml中做如下配置：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
<servlet>
<servlet-name>viewspace</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>viewspace</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 支持传输中文字符 -->
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
Der nächste Schritt ist der entscheidende Punkt. Verwenden Sie im Controller die folgende Methode, um die von der Rezeption zurückgegebenen Dateien zu akzeptieren.
1 2 3 4 5 6 7 8 9 |
|
Was zu beachten ist, ist, dass, wenn das Eingabe-Tag im Front-End-HTML Wenn das Multiple-Attribut verwendet wird, bedeutet dies, dass das Tag das Hochladen mehrerer Bilder unterstützt. In der Parameterliste des Controllers verwendet der Dateityp MultipartFile[]. bedeutet, dass ein Bild hochgeladen wird und der Controller den MultipartFile-Typ übernimmt.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
|
最后，图片上传完成后还需要提交表单，这里使用SpringMVC实现一个表单接收功能。这里名为address的参数，存储的就是图片的存储路径。
@RequestMapping(value="/form")
public String submitForm(HttpServletRequest request){
String sid = request.getParameter("name");
String address = request.getParameter("address");
if(sid != null && submiter != null && faultTime != null && message != null && address != null){
if(formDataSaveService.saveForm(sid, submiter, message, address, faultTime)){
return "ac";
}
}
return "error";
}Methode 2 Front-End-Schneiden und Hochladen (das Hinzufügen kann später erfolgen)
1 2 3 |
|
Das Obige ist die von Spring eingeführte Ajax-Implementierung Editor-Datei-Upload-Funktionscode, ich hoffe, es hilft allen! ! ,
Verwandte Empfehlungen:
Umfassende Zusammenfassung von Ajax-basierte Probleme in der jQuery-Methode
Das obige ist der detaillierte Inhalt vonAjax arbeitet mit Spring zusammen, um den Funktionscode zum Hochladen von Dateien zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Verstümmelte Zeichen beginnend mit ^quxjg$c
Ajax-Tutorial
So öffnen Sie eine IMG-Datei
Sie benötigen die Erlaubnis des Administrators, um Änderungen an dieser Datei vorzunehmen
Welches Format hat doc?
Ajax-Lösung für verstümmelten chinesischen Code
Was tun, wenn Ajax verstümmelte chinesische Zeichen überträgt?
Was ist eine TmP-Datei?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
