ajaxfileupload的使用实例以及上传报错

发布时间：2020-12-16 01:28:51 所属栏目：百科来源：网络整理

导读：报错先检查php.ini 的大小限制 php.ini修改php上传文件大小限制的方法详解打开php.ini，首先找到 file_uploads = on ;是否允许通过HTTP上传文件的开关。默认为ON即是开 upload_tmp_dir ;文件上传至服务器上存储临时文件的地方，如果没指定就会用系统默认的

报错先检查php.ini 的大小限制

php.ini修改php上传文件大小限制的方法详解

打开php.ini，首先找到
file_uploads = on ;是否允许通过HTTP上传文件的开关。默认为ON即是开
upload_tmp_dir ;文件上传至服务器上存储临时文件的地方，如果没指定就会用系统默认的临时文件夹
upload_max_filesize = 8m ;望文生意，即允许上传文件大小的最大值。默认为2M
post_max_size = 8m ;指通过表单POST给PHP的所能接收的最大值，包括表单里的所有值。默认为8M
一般地，设置好上述四个参数后，上传<=8M的文件是不成问题，在网络正常的情况下。
但如果要上传>8M的大体积文件，只设置上述四项还一定能行的通。

进一步配置以下的参数
max_execution_time = 600 ;每个PHP页面运行的最大时间值(秒)，默认30秒
max_input_time = 600 ;每个PHP页面接收数据所需的最大时间，默认60秒
memory_limit = 8m ;每个PHP页面所吃掉的最大内存，默认8M
把上述参数修改后，在网络所允许的正常情况下，就可以上传大体积文件了
max_execution_time = 600
max_input_time = 600
memory_limit = 32m
file_uploads = on
upload_tmp_dir = /tmp
upload_max_filesize = 32m
post_max_size = 32m

 版权声明：本文为博主原创文章，未经博主允许不得转载。

今天简单总结一下ajaxfileupload的用法，具体实例如下:

1.上传一个文件并携带多个参数.
2.上传多个文件并携带多个参数.
扩展:可以通过jquery扩展为添加文件选择框,去除文件选择框,而不是写死只能上传几个文件.
3.上传一个文件并携带多个参数,同时上传完成之后,及时显示.
4.上传一个文件并携带多个参数,上传之前实现预览.

5.上传一个文件,并携带多个参数.

通过css将界面完善的更加人性化:点击图片选择文件.

项目通过maven构建,前后台通过springmvc交互数据,spring采用注解方式.

a.闲话少说先看web.xml文件,如下:

[html] 
     view plain 
     copy 
     
 <?xmlversion="1.0"encoding="UTF-8"?>
 <web-appversion="2.5"
 xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
display-name>message-web</>
 
 <!--配置log4j配置文件和监听器-->
context-paramparam-name>log4jConfigLocationparam-value>classpath:log4j.propertieslistenerlistener-class>org.springframework.web.util.Log4jConfigListener 
 <!--配置springmvc主控servlet-->
servletservlet-name>springmvcservlet-class>org.springframework.web.servlet.DispatcherServletinit-param>contextConfigLocation>classpath:springmvc.xmlservlet-mappingurl-pattern>*.mvc<!--添加字符集过滤器-->
filterfilter-name>encodingFilterfilter-class>org.springframework.web.filter.CharacterEncodingFilter>encoding>UTF-8filter-mapping>/*web-app>

b.接着看spring配置文件和log4j配置文件,

copy 
      
     
beansxmlns="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"
 xsi:schemaLocation="http://www.springframework.org/schema/beans
 http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
 http://www.springframework.org/schema/context
 http://www.springframework.org/schema/context/spring-context-4.0.xsd"<!--配置controller扫描-->
context:component-scanbase-package="com.ilucky.ajaxfileupload"/>
<!--设置上传文件的最大尺寸为100MB-->
beanid="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"propertyname="maxUploadSize"value>102400000propertybeanbeans>

copy 
      
     
#Loggers log4j.rootLogger=debug,console,file
 #console
 log4j.appender.console=org.apache.log4j.ConsoleAppender
 log4j.appender.console.Threshold=DEBUG
 log4j.appender.console.layout=org.apache.log4j.PatternLayout
 log4j.appender.console.layout.ConversionPattern=[%d]-%p-%l-%m%n
 #file
 log4j.appender.file=org.apache.log4j.RollingFileAppender
 log4j.appender.file.Append=true
 log4j.appender.file.Threshold=DEBUG
 log4j.appender.file.ImmediateFlush=true
 log4j.appender.file.File=../webapps/ajaxfileupload.log
 log4j.appender.file.MaxFileSize=2500KB
 log4j.appender.file.MaxBackupIndex=20
 log4j.appender.file.layout=org.apache.log4j.PatternLayout
 log4j.appender.file.layout.ConversionPattern=[%d]-%p-%l-%m%n

c.然后看控制类.

[java] 
     copy

packagecom.ilucky.ajaxfileupload;

importjava.io.File;
importjava.io.PrintWriter;
importjava.util.HashMap;
importjava.util.Map;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importorg.apache.log4j.Logger;
importorg.springframework.context.annotation.Scope;
importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RequestParam;
importorg.springframework.web.multipart.MultipartFile;
importcom.alibaba.fastjson.JSON;
/**
*注意:
*1.如果从前台传到后台的数据出现中文乱码,在web.xml文件中配置字符集过滤器.
*2.如果从后台传到前台的数据出现中文乱码,为response设置编码方式.
*@authorIluckySi
*@since20150213
*/
@Controller("uploadFileController")
@Scope("prototype")
@RequestMapping("/uploadFileController")
publicclassUploadFileController{
privatestaticLoggerlogger=Logger.getLogger(UploadFileController.class);
@RequestMapping("/ajaxfileupload")
voidajaxfileupload(HttpServletRequestrequest,HttpServletResponseresponse,
@RequestParam(value="username",required=true)Stringusername,
@RequestParam(value="password",153); font-weight:bold; background-color:inherit">true)Stringpassword,100); background-color:inherit">@RequestParam(value="photo",153); font-weight:bold; background-color:inherit">true)MultipartFilephoto){
logger.info("后台收到参数:username="+username+",password="+password+
",photo="+photo.getOriginalFilename());
response.setCharacterEncoding("utf-8");
PrintWriterpw=null;
Map<String,String>result=newHashMap<String,String>();
StringimagePath=request.getSession().getServletContext().getRealPath("/");
StringimageName="image/"+photo.getOriginalFilename().replace("","");
try{
*模拟位置1:前台error方法.
*模拟代码:intj=2/0;
*/
pw=response.getWriter();
/**
*模拟位置2:前台success方法.
*模拟代码:intj=2/0;
if(photo.getSize()>0){
photo.transferTo(newFile(imagePath+imageName));
logger.info("存储图片成功:"+photo.getOriginalFilename());
}
result.put("result","success");
result.put("message","存储图片成功！");
}catch(Exceptione){
logger.error("存储图片失败:"+e);
"failure");
"存储图片失败！");
finally{
pw.print(JSON.toJSONString(result));
}
@RequestMapping("/ajaxfileupload2")
voidajaxfileupload2(HttpServletRequestrequest,153); font-weight:bold; background-color:inherit">true)MultipartFile[]photo){
+photo.length);
try{
pw=response.getWriter();
for(inti=0;i<photo.length;i++){
MultipartFilep=photo[i];
if(p.getSize()>0){
StringimageName="image/"+p.getOriginalFilename().replace("","");
p.transferTo( logger.info("存储图片成功:"+p.getOriginalFilename());
result.put("result","success");
result.put("message","存储图片成功！");
}catch(Exceptione){
logger.error("存储图片失败:"+e);
"failure");
"存储图片失败！");
finally{
pw.print(JSON.toJSONString(result));
@RequestMapping("/ajaxfileupload3")
voidajaxfileupload3(HttpServletRequestrequest,153); font-weight:bold; background-color:inherit">true)MultipartFilephoto){
logger.info("后台收到参数:username="+username+",password="+password+
",photo="+photo.getOriginalFilename());
response.setCharacterEncoding("utf-8");
PrintWriterpw=null;
Map<String,String>();
StringimagePath=request.getSession().getServletContext().getRealPath("/");
StringimageName="image/"+photo.getOriginalFilename().replace("",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> photo.transferTo(newFile(imagePath+imageName));
logger.info("存储图片成功:"+photo.getOriginalFilename());
@RequestMapping("/ajaxfileupload4")
voidajaxfileupload4(HttpServletRequestrequest,100); background-color:inherit">@RequestMapping("/ajaxfileupload5")
voidajaxfileupload5(HttpServletRequestrequest,248)"> }

d.依次看5个实例.

copy 
      
     
<!-- 上传一个文件并携带多个参数.
 @authorIluckySi
 @since20150213
 --<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%<%
 Stringpath=request.getContextPath();
 StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 % <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"htmlheadbasehref="<%=basePath%>"title>testmetahttp-equiv="pragma"content="no-cache"metahttp-equiv="cache-control"content="no-cache"metahttp-equiv="expires"content="0"metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"metahttp-equiv="description"content="Thisismypage"metahttp-equiv="X-UA-Compatible"content="IE=edge"metaname="viewport"content="width=device-width,initial-scale=1"scriptsrc="${pageContext.request.contextPath}/js/jquery-1.11/jquery.min.js">scriptscriptsrc="${pageContext.request.contextPath}/js/ajaxfileupload/ajaxfileupload.js" varuploadUrl='${pageContext.request.contextPath}/uploadFileController/ajaxfileupload.mvc';
 $(function(){
 $('#upload').click(function(e){
 varusername=$('#username').val();
 varpassword=$('#password').val();
 varisValidate=false;
 if(username==''||password==''){
 $('#prompt').html('spanstyle="color:red">用户名和密码是必填项!span>');
 }else{
 isValidate=true;
 if(isValidate){
 $.ajaxFileUpload({
 url:uploadUrl,
 secureuri:false,
 //文件选择框的id属性.
 fileElementId:'photo',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> dataType:'json',248)"> data:{
 username:username,248)"> password:password
 },248)"> //注意:这里的success方法代表的是前台成功接收了后台返回的数据.
 success:function(data,status){
 if(data.result=='success'){
 alert(data.message);
 //继续成功的逻辑...
 }else{
 alert(data.message);
 //继续失败的逻辑...
 //注意:如果后前台没有成功接收后台返回的数据,则认为上传失败.
 //换句话说如果后台的异常没有捕获到,则认为是error.
 error:function(s,xml,status,e){
 console.info('上传图片失败:未知异常!');
 });
 });
bodyformid="form"method="post"enctype="multipart/form-data"inputid="username"name="username"type="text"value="请输入姓名"/>
inputid="password"name="password"type="password"value="请输入密码"inputid="photo"name="photo"type="file"imgid="img"src=""inputid="upload"type="button"value="上传"formdivid="prompt"divcopy 
     
 上传多个文件并携带多个参数.
 扩展:可以通过jquery扩展为添加文件选择框,而不是写死只能上传几个文件.
 @authorIluckySi
 @since20150213
 --<%
 Stringpath=request.getContextPath();
 StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 % <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" varuploadUrl='${pageContext.request.contextPath}/uploadFileController/ajaxfileupload2.mvc';
 $(function(){
 $('#upload').click(function(e){
 varusername=$('#username').val();
 varpassword=$('#password').val();
 varisValidate=false;
 if(username==''||password==''){
 $('#prompt').html('>');
 isValidate=true;
 if(isValidate){
 $.ajaxFileUpload({
 url:uploadUrl,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> secureuri:false,248)"> //文件选择框的id属性.
 fileElementId:['photo1','photo2','photo3'],248)"> dataType:'json',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> data:{
 username:username,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> password:password
 },108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> //注意:这里的success方法代表的是前台成功接收了后台返回的数据.
 success:function(data,status){
 if(data.result=='success'){
 //继续成功的逻辑...
 //继续失败的逻辑...
 //注意:如果后前台没有成功接收后台返回的数据,则认为上传失败.
 //换句话说如果后台的异常没有捕获到,则认为是error.
 error:function(s,e){
 console.info('上传图片失败:未知异常!');
inputid="photo1"name="photo"type="file"inputid="photo2"name="photo"type="file"inputid="photo3"name="photo"type="file"copy 
     
 上传一个文件并携带多个参数,及时显示.
 varuploadUrl='${pageContext.request.contextPath}/uploadFileController/ajaxfileupload3.mvc';
 //及时预览.
 $('#img').attr('src',data.message).
 attr('width','100px').
 attr('height','100px');
copy 
      
     
 难点:
 对于Chrome,Firefox和IE10使用FileReader来实现.
 对于IE6~9使用滤镜filter:progid:DXImageTransform.Microsoft.AlphaImageLoader来实现.
 varuploadUrl='${pageContext.request.contextPath}/uploadFileController/ajaxfileupload4.mvc';
 fileElementId:'photo',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> //重点:图片预览.
 functionpreview(file){
 varpreview=document.getElementById('preview');
 if(file.files&&file.files[0]){
 varreader=newFileReader();
 reader.onload=function(event){
 preview.innerHTML='<imgsrc="'+event.target.result+'"width="100px"height="100px"/>';
 };
 reader.readAsDataURL(file.files[0]);
 //没有用IE6~9进行测试.
 preview.innerHTML='divclass="img"style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=''+file.value+''">';
inputid="photo"name="photo"type="file"onchange="preview(this)"divid="preview"copy 
     
 上传一个文件,并携带多个参数.
p>通过css将界面完善的更加人性化:点击图片选择文件.
 @since20150226
styletype="text/css" .fileDiv{
 width:100px;
 height:40px;
 background:url(image/test.png);
 overflow:hidden;
 position:relative;
 .photo{
 position:absolute;
 top:-100px;
 .upFileButton{
 width:100px;
 height:40px;
 opacity:0;
 filter:alpha(opacity=0);
 cursor:pointer;
style varuploadUrl='${pageContext.request.contextPath}/uploadFileController/ajaxfileupload5.mvc';
divid="fileDiv"class="fileDiv"inputtype="file"id="photo"name="photo"class="photo"onchange="document.getElementById('photoName').innerHTML=this.value"inputtype="button"class="upFileButton"onclick="document.getElementById('photo').click()"divid="photoName">图片文件名称inputid="upload"class="upload"type="button"value="上传">

e.最重要的是看ajaxfileupload.js文件,此文件进行了扩展,都是从网上找到的.

[javascript] 
     copy

jQuery.extend({
createUploadIframe:function(id,uri){
//createframe
varframeId='jUploadFrame'+id;
variframeHtml='<iframeid="'+frameId+'"name="'+frameId+'"style="position:absolute;top:-9999px;left:-9999px"';
if(window.ActiveXObject){
if(typeofuri=='boolean'){
iframeHtml+='src="'+'javascript:false'+'"';
elsetypeofuri=='string'){
iframeHtml+='src="'+uri+'"';
iframeHtml+='/>';
jQuery(iframeHtml).appendTo(document.body);
returnjQuery('#'+frameId).get(0);
createUploadForm://createform
varformId='jUploadForm'+id;
varfileId='jUploadFile'+id;
varform=jQuery('<formaction=""method="POST"name="'+formId+'"id="'+formId+'"enctype="multipart/form-data"></form>');
//使ajaxfileupload支持增加附加参数.
if(data){
variindata){
jQuery('<inputtype="hidden"name="'+i+'"value="'+data[i]+'"/>').appendTo(form);
//ajaxFileupload默认是只能上传一个文件,替换如下代码地实现多个文件上传.
typeof(fileElementId)=='string'){
fileElementId=[fileElementId];
infileElementId){
varoldElement=jQuery('#'+fileElementId[i]);
varnewElement=jQuery(oldElement).clone();
jQuery(oldElement).attr('id',fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
/*varoldElement=jQuery('#'+fileElementId);
varnewElement=jQuery(oldElement).clone();
jQuery(oldElement).attr('id',fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);*/
//setattributes
jQuery(form).css('position','absolute');
jQuery(form).css('top','-1200px');
jQuery(form).css('left','-1200px');
jQuery(form).appendTo('body');
returnform;
ajaxFileUpload:function(s){
//TODOintroduceglobalsettings,allowingtheclienttomodifythemforallrequests,notonlytimeout
s=jQuery.extend({},jQuery.ajaxSettings,s);
varid=newDate().getTime();
varform=jQuery.createUploadForm(id,s.fileElementId,(typeof(s.data)=='undefined'?false:s.data));
vario=jQuery.createUploadIframe(id,s.secureuri);
varformId='jUploadForm'+id;
//Watchforanewsetofrequests
if(s.global&&!jQuery.active++){
jQuery.event.trigger("ajaxStart");
varrequestDone=false;
//Createtherequestobject
varxml={};
if(s.global)
jQuery.event.trigger("ajaxSend",[xml,s]);
//Waitforaresponsetocomeback
varuploadCallback=function(isTimeout){
vario=document.getElementById(frameId);
if(io.contentWindow){
xml.responseText=io.contentWindow.document.body?io.contentWindow.document.body.innerHTML: xml.responseXML=io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
if(io.contentDocument){
xml.responseText=io.contentDocument.document.body?io.contentDocument.document.body.innerHTML: xml.responseXML=io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
catch(e){
jQuery.handleError(s,null,e);
if(xml||isTimeout=="timeout"){
requestDone=true;
varstatus;
status=isTimeout!="timeout"?"success":"error";
//Makesurethattherequestwassuccessfulornotmodified
if(status!="error"){
//processthedata(runsthexmlthroughhttpDataregardlessofcallback)
vardata=jQuery.uploadHttpData(xml,s.dataType);
//Ifalocalcallbackwasspecified,fireitandpassitthedata
if(s.success)
s.success(data,status);
//Firetheglobalcallback
jQuery.event.trigger("ajaxSuccess",153); font-weight:bold; background-color:inherit">else
status="error";
jQuery.handleError(s,e);
//Therequestwascompleted
if(s.global)
jQuery.event.trigger("ajaxComplete",s]);
//HandletheglobalAJAXcounter
if(s.global&&!--jQuery.active)
jQuery.event.trigger("ajaxStop");
//Processresult
if(s.complete)
s.complete(xml,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> jQuery(io).unbind();
setTimeout(function(){
jQuery(io).remove();
jQuery(form).remove();
catch(e){
xml= };
//Timeoutchecker
if(s.timeout>0){
//Checktoseeiftherequestisstillhappening
if(!requestDone)uploadCallback("timeout");
varform=jQuery('#'+formId);
jQuery(form).attr('action',s.url);
jQuery(form).attr('method','POST');
jQuery(form).attr('target',frameId);
if(form.encoding){
jQuery(form).attr('encoding','multipart/form-data');
else{
jQuery(form).attr('enctype','multipart/form-data');
jQuery(form).submit();
jQuery('#'+frameId).load(uploadCallback);
return{abort:function(){}};
uploadHttpData:function(r,type){
vardata=!type;
data=type=="xml"||data?r.responseXML:r.responseText;
//Ifthetypeis"script",evalitinglobalcontext
if(type=="script")
jQuery.globalEval(data);
//GettheJavaScriptobject,ifJSONisused.
if(type=="json")
//针对ajaxfileupload返回json带<pre>标签解,
//决方案为将eval("data="+data);换成data=jQuery.parseJSON(jQuery(data).text());
//eval("data="+data);
data=jQuery.parseJSON(jQuery(data).text());
//evaluatescriptswithinhtml
if(type=="html")
jQuery("<div>").html(data).evalScripts();
returndata;
//针对ajaxfileupload.js结合低版本jquery报异常:TypeError:jQuery.handleErrorisnotafunction,添加如下代码.
handleError:function(s,xhr,e){
if(s.error){
s.error.call(s.context||s,e);
if(s.global){
(s.context?jQuery(s.context):jQuery.event).trigger("ajaxError",[xhr,s,e]);
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!