首先下载CodeIgniter和SWFUpload,,,,这个大家自己下载...最好去官网下

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />

<title>php jquery uploadify多文件上传</title>

<script type="text/javascript" src="/images/uploadify/jquery-1.7.2.js" charset="utf-8"></script>

</head>

<body>

<div class="infor_box"><div class="infor_box_title"><span>补充信息<em>(可选择)</em></span>上传相片可使效果提高三倍</div>

<table cellpadding="0" cellspacing="0" border="0" class="frame">

<tr><th>上传图片:</th><td>

<?php session_start();$_SESSION["file_info"] = array(); //用于保存上传文件信息?>

<link href="/images/uploadify/default.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/images/uploadify/swfupload.js" charset="utf-8"></script>

<script type="text/javascript" src="/images/uploadify/handlers.js" charset="utf-8"></script>

<script type="text/javascript">

var swfu;

window.onload = function () {

swfu = new SWFUpload({

// Backend Settings

upload_url: "/uptest/imgup/",

post_params: {"SSID": Math.random()},

// File Upload Settings

file_size_limit : "1024 MB", // 2MB

//file_types : "",

file_types_description : "图像文件",

file_upload_limit : 100 ,

//file_queue_limit : 20,

// Event Handler Settings - these functions as defined in Handlers.js

//  The handlers are not part of SWFUpload but are part of my website and control how

//  my website reacts to the SWFUpload events.

swfupload_preload_handler : preLoad,

swfupload_load_failed_handler : loadFailed,

file_queue_error_handler : fileQueueError,

file_dialog_complete_handler : fileDialogComplete,

upload_progress_handler : uploadProgress,

upload_error_handler : uploadError,

upload_success_handler : uploadSuccess,

//upload_success_handler : function (file, serverData, responseReceived) {

// console.dir(file);

//alert("Successfully uploaded: "+fileObj.filePath);

//alert(response);

// getResult(response);//获得上传的文件路径

//},

upload_complete_handler : uploadComplete,

 

// Button Settings

button_image_url : "/images/uploadify/SmallSpyGlassWithTransperancy_17x18.png",

button_placeholder_id : "spanButtonPlaceholder",

button_width: 220,

button_height: 18,

button_text : '<span class="uploadbutton">请选择图片文件,支持按住Ctrl后多选</span>',

button_text_style : '.uploadbutton{font-size: 13pt;} .buttonSmall {font-size: 13pt;}',

button_text_top_padding: 0,

button_text_left_padding: 18,

button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,

button_cursor: SWFUpload.CURSOR.HAND,

// Flash Settings

flash_url : "/images/uploadify/swfupload.swf",

flash9_url : "/images/uploadify/swfupload_FP9.swf",

custom_settings : {

upload_target : "divFileProgressContainer",

thumbnail_height: 400,

thumbnail_width: 600,

thumbnail_quality: 100

},

// Debug Settings

debug: true

});

};

</script>

<div style="width: 220px; height: 18px; border: solid 1px #7FAAFF; background-color: #C5D9FF; padding: 2px;"><span id="spanButtonPlaceholder"></span></div>

<div id="divFileProgressContainer"></div>

<div id="thumbnails"></div>

<div id="upflash"></div><p class="mt5 mb5">提醒:</p><ul><li>1、盗用他人图片的行为一经核实,将删除该信息。 </li><li>2、请勿上传有水印、盖章等任何侵犯他人版权或含有广告信息的图片,一经核实,将删除该信息。</li></ul></td></tr>

</table></div>

<div class="blank10"></div>

 

 

<div id="divTxt" style="display:none"><span style="color:red"><strong>已经上传的图片有:</strong></span><br></div><br>

 

 

<form action="/uptest/upload" enctype="multipart/form-data" method="post">

<input type="file" name="Filedata" />

<input type="submit" value="提交" />

</form>

</body>

</html>

 

上面就是加载SWFUpload   界面是看下图

 

点击查看原图

 

 

这里主要说说里面的几个参数

upload_url :php要执行上传的函数   比如   /uptest/imgup/

post_params: {"SSID": Math.random()}    这个是ssid值...用随机的就行了

file_size_limit : "1024 MB"   //上传图片的大小....貌似是所有文件的总大小

file_upload_limit : 100    //上传文件的数量   比如你写5..那么只能一起传5个文件...

 

custom_settings : {

     upload_target : "divFileProgressContainer",

     thumbnail_height: 400,

     thumbnail_width: 600,

     thumbnail_quality: 100

    },

 

这个是自定义的一个参数..我测试的时候在这个地方调试了很久...

其中的upload_target  是一个div   也就是你上传成功之后图片  无刷新直接在页面上显示  

下面2个就是上传图片之后处理图片的高宽...我就在这里调试了很久..我开始写的600 800   然后传图片的时候总是出现传不上去的情况.

开始百度..都是找国内的..没一个靠谱的...没办法..就去谷歌看英文...总的来说就是宽高大了...改小就行了...(英语不行.用软件翻译的)

下面就讲php的上传

function uploadfile($watefile,$formname,$type=''){

$config['upload_path'] = './uploads/';

$config['allowed_types'] = 'gif|jpg|png|bmp|jpeg';

$config['max_size'] = 20480;

$config['encrypt_name'] = TRUE;

$this->load->library('upload',$config); //加载上传类

$field_name = $formname; //指定表单名称

if (!$this->upload->do_upload($field_name)){ //上传

$tempfile = false;

}else{

if(!empty($watefile)){

$this->load->library('image_lib');

$data = $this->upload->data(); //获取上传后的数据

$config1['source_image'] = $config['upload_path'].$data['file_name'];  

$config1['wm_type'] = 'overlay';

$config1['wm_overlay_path'] = $watefile; 

$config1['wm_vrt_alignment'] = 'bottom';

$config1['wm_hor_alignment'] = 'center';

$config1['wm_padding'] = '-50';

//var_dump("<pre>",$config1);

$this->image_lib->initialize($config1); 

$field_name = $this->image_lib->watermark(); 

}

$tempfile = $this->ftp_file($field_name);

}

if(empty($type)){return $tempfile;}else{return 'FILEID:'.$tempfile;}

}

 

 

我这里是先将图片存到本地..然后看是否要打水印..然后传到ftp的目录下...大概方法是这样...其中'FILEID:'.$tempfile;这个是格式

js里面会匹配的...不要随便改...最后..我也改了js的一点东西...原来这个上传的js是用session先存值...然后在存到数据库...这里你们可能会说为什么要先存到session

 

这个上传多图片明显是某个添加功能里面的一块..如果没有添加之后的id...怎么把图片和添加的信息绑定起来...用seesion比较占服务器

我就想让他返回图片的地址..用input装着..隐藏...提交表单的时候一起提交

下面贴修改js的地方

修改的文件是handlers.js

function uploadSuccess(file, serverData) {

try {

var progress = new FileProgress(file,  this.customSettings.upload_target);

 

if (serverData.substring(0, 7) === "FILEID:") {

addImage(serverData.substring(7));

            getResult(serverData.substring(7));//自己加的

progress.setStatus("Upload Complete.");

progress.toggleCancel(false);

} else {

addImage("error.gif");

progress.setStatus("错误.");

progress.toggleCancel(false);

alert(serverData);

 

}

 

 

} catch (ex) {

this.debug(ex);

}

}

//自己加的函数...就是用js生成一个input

function getResult(content){

//通过上传的图片来动态生成text来保存路径

var board = document.getElementById("divTxt");

board.style.display="";

var newInput = document.createElement("input");

newInput.type = "text"; 

newInput.size = "45"; 

newInput.name="myFilePath[]";

var obj = board.appendChild(newInput);

var br= document.createElement("br"); 

board.appendChild(br);

obj.value=content;

 

}


声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

et_highlighter