h5多图上传
这里要使用plupload插件
前端js
<script> var uploader = new plupload.Uploader({ //实例化一个plupload上传对象 browse_button: 'choose', url: '../ajax_image', flash_swf_url: '../help/js/Moxie.swf', silverlight_xap_url: '', filters: { mime_types: [ //只允许上传图片文件 { title: "图片文件", extensions: "jpg,gif,png" } ] } }); uploader.init(); //初始化 //绑定文件添加进队列事件 uploader.bind('FilesAdded', function (uploader, files) { // alert(files[0].size); var msgFlg = 0; for (var i = 0, len = files.length; i < len; i++) { if (files[i].size > 81920) { uploader.files.splice(i, 1); msgFlg = 1; } else { !function (i) { previewImage(files[i], function (imgsrc) { $('#file-list').html($('#file-list').html() + '<div style="float:left" class="pic_list" id="' + files[i].id + '">' + ' (' + plupload.formatSize(files[i].size) + ')<a href="###" class="pic_delete" data-val=' + files[i].id + '>删除</a><br/>' + '<img class="listview" width="90" height="60" src="' + imgsrc + '" name="' + files[i].name + '" /></div>'); }) }(i); } } if (msgFlg == 1) { alert("上传图片小于80K"); return false; } if (uploader.files.length > 0) { //alert('请选择图片!'); //return false; uploader.start(); } }); $(document).on('click', '.pic_list a.pic_delete', function () { $(this).parent().remove(); var toremove = ''; var id = $(this).attr("data-val"); for (var i in uploader.files) { if (uploader.files[i].id === id) { toremove = i; $("."+id).remove(); } } uploader.files.splice(toremove, 1); }); uploader.bind("UploadComplete", function (uploader, file) { //console.log(uploader.files[0].id); html = ''; for(i=0;i<uploader.files.length;i++) { html += '<input type="hidden" name="xx[]" class="'+uploader.files[i].id+'" />'; } console.log(html); $("#test").html(html); //<input type="hidden" name="xx[]" class=""> //file是文件路径 }); /* function exit() { window.parent.location.href = window.parent.location.href; } */ //plupload中为我们提供了mOxie对象 //有关mOxie的介绍和说明请看:https://github.com/moxiecode/moxie/wiki/API function previewImage(file, callback) {//file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数 if (!file || !/image\//.test(file.type)) return; //确保文件是图片 if (file.type == 'image/gif') {//gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png var fr = new mOxie.FileReader(); fr.onload = function () { callback(fr.result); fr.destroy(); fr = null; } fr.readAsDataURL(file.getSource()); } else { var preloader = new mOxie.Image(); preloader.onload = function () { //preloader.downsize(550, 400);//先压缩一下要预览的图片,宽300,高300 var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据 callback && callback(imgsrc); //callback传入的参数为预览图片的url preloader.destroy(); preloader = null; }; preloader.load(file.getSource()); } } $("#update").bind('click', function () { //这里看个人需求 你可以直接选择后马上提交 if (uploader.files.length > 0) { //alert('请选择图片!'); //return false; uploader.start(); } }) </script>
服务端代码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"); /* // Support CORS header("Access-Control-Allow-Origin: *"); // other CORS headers if any... if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { exit; // finish preflight CORS requests here } */ // 5 minutes execution time @set_time_limit(5 * 60); // Uncomment this one to fake upload time // usleep(5000); $public_path = public_path(); $imagesDir = '/upload/images'; // Settings $targetDir = $public_path . $imagesDir; //$targetDir = 'uploads'; $cleanupTargetDir = true; // Remove old files $maxFileAge = 5 * 3600; // Temp file age in seconds // Create target dir if (!file_exists($targetDir)) { @mkdir($targetDir); } // Get a file name if (isset($_REQUEST["name"])) { $fileName = time() . rand(1000, 9999).$_REQUEST["name"]; } elseif (!empty($_FILES)) { $fileName = time() . rand(1000, 9999).$_FILES["file"]["name"]; } else { $fileName = uniqid("file_"); } $filePath = $targetDir . DIRECTORY_SEPARATOR . $fileName; // Chunking might be enabled $chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0; $chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 0; // 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}.part") { continue; } // Remove temp file if it is older than the max age and is not the current file if (preg_match('/\.part$/', $file) && (filemtime($tmpfilePath) < time() - $maxFileAge)) { @unlink($tmpfilePath); } } closedir($dir); } // Open temp file if (!$out = @fopen("{$filePath}.part", $chunks ? "ab" : "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); // Check if file has been uploaded if (!$chunks || $chunk == $chunks - 1) { // Strip the temp .part suffix off rename("{$filePath}.part", $filePath); } echo $imagesDir. DIRECTORY_SEPARATOR .$fileName;
插件包自己去下吧