用webuploader怎么解决跨域上传文件的问题

Posted 2023-05-06

参考技术A 最近研究了下大文件上传的方法，找到了webuploader js 插件进行大文件上传，大家也可以参考这篇文章进行学习：《Web Uploader文件上传插件使用详解》 使用 使用webuploader分成简单直选要引入 <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="webuploader文件夹/webuploader.js"></script> html部分 <div id="uploader" class="wu-example"> <!--用来存放文件信息--> <div id="thelist" class="uploader-list"></div> <div class="btns"> <div id="picker">选择文件</div> <button id="ctlBtn" class="btn btn-default">开始上传 </button> </div> </div> 初始化Web Uploader jQuery(function() $list = $('#thelist'), $btn = $('#ctlBtn'), state = 'pending', uploader; uploader = WebUploader.create( // 不压缩image resize: false, // swf文件路径 swf: 'uploader.swf', // 文件接收服务端。 server: upload.php, // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#picker', chunked: true, chunkSize:2*1024*1024, auto: true, accept: title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' ); upload.php处理 以下是根据别人的例子自己拿来改的php 后台代码 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"); 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 = 'uploads'.DIRECTORY_SEPARATOR.'file_material_tmp'; $uploadDir = 'uploads'.DIRECTORY_SEPARATOR.'file_material'; $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("file_"); $oldName = $fileName; $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; // 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 . DIRECTORY_SEPARATOR . $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 (preg_match('/\.(partparttmp)$/', $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", "rb")) die('"jsonrpc" : "2.0", "error" : "code": 101, "message": "Failed to open input stream.", "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 ( !file_exists("$filePath_$index.part") ) $done = false; break; if ( $done ) $pathInfo = pathinfo($fileName); $hashStr = substr(md5($pathInfo['basename']),8,16); $hashName = time() . $hashStr . '.' .$pathInfo['extension']; $uploadPath = $uploadDir . DIRECTORY_SEPARATOR .$hashName; if (!$out = @fopen($uploadPath, "wb")) die('"jsonrpc" : "2.0", "error" : "code": 102, "message": "Failed to open output stream.", "id" : "id"'); if ( flock($out, LOCK_EX) ) 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); $response = [ 'success'=>true, 'oldName'=>$oldName, 'filePaht'=>$uploadPath, 'fileSize'=>$data['size'], 'fileSuffixes'=>$pathInfo['extension'], 'file_id'=>$data['id'], ]; die(json_encode($response)); // Return Success JSON-RPC response die('"jsonrpc" : "2.0", "result" : null, "id" : "id"'); 以上就是本文的全部内容，希望对大家的学习有所帮助。

jquery WebUploader 插件 怎么取消避免重复上传.

webuploader文档 里面有个duplicate属性，是可选的，  true为可重复   ，false为不可重复   默认为undifind  也是不可重复。

所以只需在属性的后面追加duplicate:true  就可以实现重复上传。

参考技术A // 初始化Web Uploader
uploader = WebUploader.create(
// 自动上传。
auto: true,
// swf文件路径
swf: '__PUBLIC__/Home/swf/Uploader.swf',
// 文件接收服务端。
server: '#:U('Feedback/uploadimg')#',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
//[可选] [默认值：undefined] 验证文件总数量, 超出则不允许加入队列。
fileNumLimit: 2,
//[可选] [默认值：undefined] 验证单个文件大小是否超出限制, 超出则不允许加入队列。
fileSingleSizeLimit: 1024*512,
// 只允许选择文件，可选。
accept:
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'

);

uploader.on('error', function(handler)

if(handler=="Q_EXCEED_NUM_LIMIT")
alert("超出最大张数");

if(handler=="F_DUPLICATE")
alert("文件重复");

); 参考技术B 是希望可以重复上传的意思吧，被楼上坑了，应该是设置：
duplicate ：true 参考技术C 我看了源码，似乎无法取消，只有修改源码了 参考技术D duplicate ：false