仿照微信朋友圈做了一个界面如下，先看效果：
1、点开界面
2、选择图片
3、点击上传
4、动态显示
第一个页面的wxml：
第一个页面的wcss：
第一个页面的js：
我认为难点在于请求后台上传图片的方法，虽然我也没搞懂，不过直接使用，他会返回放在服务器的哪个位置，代码如下：
<div class="jb51code">
<pre class="brush:js;">
public function upload_do(){
extract(generateRequestParamVars());
/**
- upload.PHP
- Copyright 2013,Moxiecode Systems AB
- Released under GPL License.
- License: http://www.plupload.com/license
- Contributing: http://www.plupload.com/contributing
*/!! IMPORTANT:
!! this file is just an example,it doesn't incorporate any security checks and
!! is not recommended to be used in production environment as it is. Be sure to
!! revise it and customize to your needs.
// Make sure file is not cached (as it happens for example on iOS devices)
header("Expires: Mon,26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D,d M Y H:i:s") . " GMT");
header("Cache-Control: no-store,no-cache,must-revalidate");
header("Cache-Control: post-check=0,pre-check=0",false);
header("Pragma: no-cache");
echo $fileName;
// Support CORS
// header("Access-Control-Allow-Origin: ");
// other CORS headers if any...
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
exit; // finish preflight CORS requests here
}
if ( !empty($_REQUEST[ 'debug' ]) ) {
$random = rand(0,intval($_REQUEST[ 'debug' ]) );
if ( $random === 0 ) {
header("HTTP/1.0 500 Internal Server Error");
exit;
}
}
// header("HTTP/1.0 500 Internal Server Error");
// exit;
// 5 minutes execution time
@set_time_limit(5 60);
// Uncomment this one to fake upload time
usleep(5000);
// Settings
// $targetDir = ini_get("upload_tmp_dir") . DIRECTORY_SEPARATOR . "plupload";
$targetDir = C('CACHE_DIR').DIRECTORY_SEPARATOR.'Uploads'.DIRECTORY_SEPARATOR.'Tmps';
$uploadDir = C('CACHE_DIR').DIRECTORY_SEPARATOR.'Uploads'.DIRECTORY_SEPARATOR.'Tmps'.DIRECTORY_SEPARATOR.date('Y').DIRECTORY_SEPARATOR.date('m').DIRECTORY_SEPARATOR.date('d');
$uploadUrl = '/Uploads/Tmps/'.date('Y').'/'.date('m').'/'.date('d');
//创建文件夹
if(!is_dir($uploadDir)){
@mkdir($uploadDir,0777,true);
}
$cleanupTargetDir = true; // Remove old files
$maxFileAge = 5 * 3600; // Temp file age in seconds
// Create target dir
if (!file_exists($targetDir)) {
@mkdir($targetDir);
}
// Create target dir
if (!file_exists($uploadDir)) {
@mkdir($uploadDir);
}
// Get a file name
if (isset($_REQUEST["name"])) {
$fileName = $_REQUEST["name"];
} elseif (!empty($_FILES)) {
$fileName = $FILES["file"]["name"];
} else {
$fileName = uniqid();
}
//$fileName = uniqid("file").'.'.pathinfo($fileName,PATHINFO_EXTENSION);
$extension=pathinfo($fileName,PATHINFO_EXTENSION);
if($extension){
$fileName = uniqid().'.'.$extension;
}else{
$fileName = uniqid();
}
$md5File = @file('md5list.txt',FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
$md5File = $md5File ? $md5File : array();
if (isset($_REQUEST["md5"]) && array_search($_REQUEST["md5"],$md5File ) !== FALSE ) {
die('{"jsonrpc" : "2.0","result" : null,"id" : "id","exist": 1}');
}
$filePath = $targetDir . DIRECTORY_SEPARATOR . $fileName;
$uploadPath = $uploadDir . DIRECTORY_SEPARATOR . $fileName;
// Chunking might be enabled
$chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;
$chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 1;
// echo $_REQUEST["chunks"];
// echo $_REQUEST["chunk"];
// Remove old temp files
if ($cleanupTargetDir) {
if (!is_dir($targetDir) || !$dir = opendir($targetDir)) {
die('{"jsonrpc" : "2.0","error" : {"code": 100,"message": "Failed to open temp directory."},"id" : "id"}');
}
while (($file = readdir($dir)) !== false) {
$tmpfilePath = $targetDir . DIRECTORYSEPARATOR . $file;
// If temp file is current file proceed to the next
if ($tmpfilePath == "{$filePath}{$chunk}.part" || $tmpfilePath == "{$filePath}_{$chunk}.parttmp") {
continue;
}
// Remove temp file if it is older than the max age and is not the current file
if (pregmatch('/.(part|parttmp)$/',$file) && (@filemtime($tmpfilePath) < time() - $maxFileAge)) {
@unlink($tmpfilePath);
}
}
closedir($dir);
}
// Open temp file
if (!$out = @fopen("{$filePath}{$chunk}.parttmp","wb")) {
die('{"jsonrpc" : "2.0","error" : {"code": 102,"message": "Failed to open output stream."},"id" : "id"}');
}
if (!empty($_FILES)) {
if ($_FILES["file"]["error"] || !is_uploaded_file($_FILES["file"]["tmp_name"])) {
die('{"jsonrpc" : "2.0","error" : {"code": 103,"message": "Failed to move uploaded file."},"id" : "id"}');
}
// Read binary input stream and append it to temp file
if (!$in = @fopen($_FILES["file"]["tmp_name"],"rb")) {
die('{"jsonrpc" : "2.0","error" : {"code": 101,"message": "Failed to open input stream."},"id" : "id"}');
}
} else {
if (!$in = @fopen("PHP://input","id" : "id"}');
}
}
while ($buff = fread($in,4096)) {
fwrite($out,$buff);
}
@fclose($out);
@fclose($in);
rename("{$filePath}{$chunk}.parttmp","{$filePath}{$chunk}.part");
$index = 0;
$done = true;
for( $index = 0; $index < $chunks; $index++ ) {
if ( !fileexists("{$filePath}{$index}.part") ) {
$done = false;
break;
}
}
if ( $done ) {
if (!$out = @fopen($uploadPath,"wb")) {
die('{"jsonrpc" : "2.0","id" : "id"}');
}
if ( flock($out,LOCKEX) ) {
for( $index = 0; $index < $chunks; $index++ ) {
if (!$in = @fopen("{$filePath}{$index}.part","rb")) {
break;
}
while ($buff = fread($in,4096)) {
fwrite($out,$buff);
}
@fclose($in);
@unlink("{$filePath}_{$index}.part");
}
flock($out,LOCK_UN);
}
@fclose($out);
}
// Return Success JSON-RPC response
//die('{"jsonrpc" : "2.0","id" : "id"}');
die($uploadUrl .'/'. $fileName);
}
