报错先检查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
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的用法,具体实例如下:
2.上传多个文件并携带多个参数.
扩展:可以通过jquery扩展为添加文件选择框,去除文件选择框,而不是写死只能上传几个文件.
3.上传一个文件并携带多个参数,同时上传完成之后,及时显示.
4.上传一个文件并携带多个参数,上传之前实现预览.
项目通过maven构建,前后台通过springmvc交互数据,spring采用注解方式.
a.闲话少说先看web.xml文件,如下:
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>
c.然后看控制类.
- 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)"> }
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('上传图片失败:未知异常!');
});
});
body formid="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文件,此文件进行了扩展,都是从网上找到的.