iframe 上傳
upload.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://www.diantang.cn/jquery/3.2.1/jquery.min.js"></script></head><body><iframe id="upload_target" name="upload_target" src="upload.php" style="width:0;heigth:0;overflow:hidden;border:0;position: absolute; left:-500px;"></iframe><img id="tag_img" src="http://www.pangdan.com/p_w_picpaths/chunwan.gif" /><form enctype="multipart/form-data" action="upload.php" method="post" target="upload_target"> <input type="file" id="fileipt" name="userfile" class="file" value="" /> <input type="submit" name="uploadimg" value="上傳" id="submit" hidden /></form><script type='text/javascript'> var lastFileName; $("#fileipt").change(function() { var fileName = $(this).val(); var pos = fileName.lastIndexOf("\\"); fileName = fileName.substr(pos+1, fileName.length); // 截取出文件名 因爲會帶路徑 lastFileName = fileName; $("#submit").click(); }); function stopSend($url) { $("#tag_img").attr("src",$url); }</script></body></html> |
upload.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?php/** * Created by PhpStorm. * User: chenxiaolong * Date: 7/21/17 * Time: 10:24 *///var_dump($_FILES);$file=$_FILES['userfile'];if($file['size'] != 0) { $name=rand(0,500000).dechex(rand(0,10000)).".jpg"; move_uploaded_file($file['tmp_name'],$name); if($name) { echo "<script>parent.stopSend('$name')</script>"; }} |
ajax 無刷新上傳圖片
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <button id="J_headimg" style="font-size: 12px;margin-left: 10px;width: 70px;height: 30px;background: #10AD5A;color: #fff;">修改頭像</button><input type="file" name="pic" id="pic" hidden accept="p_w_picpath/*" /><input type="text" id="headimg" name="headimg" hidden><script> $("#J_headimg").click(function() { $("#pic").click(); return false; }); $("#pic").change(function() { var $that = $(this); var imgPath = $(this).val(); if (imgPath == "") { alert("請選擇上傳圖片！"); return; } //判斷上傳文件的後綴名 var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1); if (strExtension != 'jpg' && strExtension != 'gif' && strExtension != 'png' && strExtension != 'bmp' && strExtension != 'jpeg') { alert("請選擇圖片文件"); return; } var formData = new FormData(); formData.append('file', $that[0].files[0]);// php 用$_FILES['file']接收 console.log($that[0].files[0]); $.ajax({ type: "POST", url: "__URL__/uploadimg", data: formData, cache: false, processData: false,// 需要加這兩個參數 contentType: false, success: function(data) { var obj = JSON.parse(data); if(obj.status == 0) { $("#preimg").attr("src","Public/Upload/" + obj.data); $("#headimg").val(obj.data); } else { alert(obj.data); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("上傳失敗，請檢查網絡後重試"); } }); });</script> |
對應uploadimg方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | public function uploadimg() { $file = $_FILES['file']; $arr = array('jpg'=>'p_w_picpath/jpeg','png'=>'p_w_picpath/png','gif'=>'p_w_picpath/gif','bmp'=>'p_w_picpath/bmp'); if($ext = array_search($file['type'],$arr)) { $rand = uniqid(); $filename = "Public/Upload/avatar/{$rand}.{$ext}"; } else { exit(json_encode(array('status'=>2,'data'=>'只支持圖片上傳'))); } $r = move_uploaded_file($file['tmp_name'],$filename); if($r) { exit(json_encode(array('status'=>0,'data'=>"avatar/$rand.$ext"))); } else { exit(json_encode(array('status'=>1,'data'=>'上傳失敗'))); }} |