Bootstrap File Input 真正 解决跨域问题
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap File Input 真正 解决跨域问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天一個項目需要 做文件上傳 ，圖方便 就使用了Bootstrap File Input ? 插件 問題來了 文件放置服務器和 活動服務器 是分開的?
于是涉及到了 一個ajax 跨域請求問題 ?后端使用php 接下來是解決代碼 歡迎提出意見?
前臺代碼
<!DOCTYPE html> <!-- release v4.4.0, copyright 2014 - 2017 Kartik Visweswaran --> <!--suppress JSUnresolvedLibraryURL --> <html lang="en"> <head> ? ? <meta charset="UTF-8"/> ? ? <title>Krajee JQuery Plugins - © Kartik</title> ? ? <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> ? ? <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css"/> ? ? <link href="../themes/explorer/theme.css" media="all" rel="stylesheet" type="text/css"/> ? ? <script src="../js/jquery.min.js"></script> ? ? <script src="../js/plugins/sortable.js" type="text/javascript"></script> ? ? <script src="../js/fileinput.js" type="text/javascript"></script> ? ? <script src="../js/locales/fr.js" type="text/javascript"></script> ? ? <script src="../js/locales/es.js" type="text/javascript"></script> ? ? <script src="../themes/explorer/theme.js" type="text/javascript"></script> ? ? <script src="../js/bootstrap.min.js" type="text/javascript"></script> </head> <body> <input id="input-711" name="file[]" type="file" multiple class="file-loading"> <input id="userid" name="userid" value="1" ?type="hidden"> <input id="username" name="username" type="text"> <script> $("#input-711").fileinput({ ? ? language: 'zh', //設置語言 ? ? uploadUrl: "http://url", // server upload action ? ? uploadAsync: true, ? ? maxFileCount: 5, ? ? showBrowse: false, ? ? browseOnZoneClick: true, ? ? // allowedFileExtensions: ['mp4'], ? ? maxFileCount: 10, ? ? uploadExtraData: function() { ? ? ? ? ? ? return { ? ? ? ? ? ? ? ? userid: $("#userid").val(), ? ? ? ? ? ? ? ? username: $("#username").val() ? ? ? ? ? ? }; ? ? ? ? } }); </script> </html> 后臺代碼 <?php?header('Access-Control-Allow-Origin: *');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'.DIRECTORY_SEPARATOR.date('Ymd');$cleanupTargetDir = true; // Remove old files$maxFileAge = 5 * 3600; // Temp file age in seconds// Create target dirif (!file_exists($targetDir)) {@mkdir($targetDir);}// Create target dirif (!file_exists($uploadDir)) {@mkdir($uploadDir);}// Get a file nameif (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 filesif ($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 nextif ($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 fileif (preg_match('/\.(part|parttmp)$/', $file) && (@filemtime($tmpfilePath) < time() - $maxFileAge)) {@unlink($tmpfilePath);}}closedir($dir);}// Open temp fileif (!$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 fileif (!$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 responsedie('{"jsonrpc" : "2.0", "result" : null, "id" : "id"}');?>轉載于:https://www.cnblogs.com/songv/p/7420125.html
總結
以上是生活随笔為你收集整理的Bootstrap File Input 真正 解决跨域问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux中的gdb调试方法总结
- 下一篇： 支配树学习笔记