6.28 头像预览：form方法和ajax方法
生活随笔
收集整理的這篇文章主要介紹了
6.28 头像预览：form方法和ajax方法
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一用form實(shí)現(xiàn)頭像預(yù)覽
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><title>Document</title><style type="text/css">#sc{display:none;}#showing{width:100px;height: 100px;background-image: url(../0626liucheng/upfile/1530091054aa.jpg);background-size:100% 100%;}#upfile{opacity:0;width: 100%;height: 100%;} </style> </head> <body><form action="chuli.php" method="post" id="sc_form" enctype="multipart/form-data" target="sc"><div id="showing"> <!-- target 屬性規(guī)定在何處打開 action URL。--><input type="file" name="upfile" id="upfile" value="" οnchange="$('#sc_form').submit()"/></div></form><!--<iframe> 標(biāo)簽規(guī)定一個(gè)內(nèi)聯(lián)框架。一個(gè)內(nèi)聯(lián)框架被用來(lái)在當(dāng)前 HTML 文檔中嵌入另一個(gè)文檔。--><iframe id="sc" name="sc" src="" width="" height=""><!--PHP傳過(guò)來(lái)的js代碼--></iframe> </body> </html> <script type="text/javascript">//當(dāng)提交表單時(shí)，會(huì)發(fā)生 submit 事件。/*function aa(){$("#sc_form").submit();}*/function showImage(url){//alert(url);$("#showing").css("background-image","url("+url+")");} </script>============================處理頁(yè)面=======================================
<?php
? ??? ?? //var_dump($_FILES['upfile']);
?? ?? $name = $_FILES['upfile']['name'];
?? ?? $type = $_FILES['upfile']['type'];
?? ?? $tmp_name = $_FILES['upfile']['tmp_name'];//儲(chǔ)存的臨時(shí)文件名，一般是系統(tǒng)默認(rèn)。
?? ?? $error = $_FILES['upfile']['error'];
?? ?? $size = $_FILES['upfile']['size'];
?? ?? if(!empty($name)){
?? ? ??? ?if($error<=0){
?? ? ??? ??? ?if($type =="image/jpeg"){
?? ? ??? ??? ??? ?if($size<=100000){
?? ? ??? ??? ??? ??? ?if(!is_dir("./upfile/")){
?? ? ??? ??? ??? ??? ??? ?mkdir("./upfile/");
?? ? ??? ??? ??? ??? ?}
?? ? ??? ??? ??? ??? ?$path ="./upfile/".$name;
?? ? ??? ??? ??? ??? ?//轉(zhuǎn)換編碼格式
??????????????????? //$filename = iconv("UTF-8","gb2312",$filename);
?? ? ??? ??? ??? ??? ?if(move_uploaded_file($tmp_name,$path)){
?? ? ??? ??? ??? ??? ??? ?echo "<script> window.parent.showImage('{$path}');</script>";
?? ? ??? ??? ??? ??? ??? //在iframe的父級(jí)當(dāng)前頁(yè)面調(diào)用js代碼
?? ? ??? ??? ??? ??? ?}
?? ? ??? ??? ??? ?}
?? ? ??? ??? ?}
?? ? ??? ?}
?? ?? }
?>
二 用ajax方法實(shí)現(xiàn)頭像預(yù)覽
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script src="../public/ajaxfileupload.js" type="text/javascript" charset="utf-8"></script><style type="text/css">#showing{width:100px;height: 100px;background-image: url(../0626liucheng/upfile/1530091054aa.jpg);background-size:100% 100%;}#upfile{opacity:0;width:100%;height: 100%;} </style> </head> <body><div id="showing"><input type="file" name="upfile" id="upfile" value="" title="上傳附件" /></div><input type="button" value="上傳" οnclick="upload()"/> </body> </html> <script type="text/javascript">function upload(){var path = $("#upfile").val();if($.trim(path)==""){alert("請(qǐng)選擇要上傳的文件");return;}$.ajaxFileUpload({type:"post",url:"chuli2.php",//這是服務(wù)器處理的代碼secureuri:false,//是否啟用安全提交，默認(rèn)為falsefileElementId:'upfile',//上傳文件的id，name屬性名dataType:"text",//返回值類型，一般設(shè)置為json，application/jsondata:{},//傳遞參數(shù)到服務(wù)器success:function(data){$("#showing").css("background-image","url("+data+")");}});$} </script><?php//var_dump($_FILES['upfile']);$name = $_FILES['upfile']['name'];$type = $_FILES['upfile']['type'];$tmp_name = $_FILES['upfile']['tmp_name'];//儲(chǔ)存的臨時(shí)文件名，一般是系統(tǒng)默認(rèn)。$error = $_FILES['upfile']['error'];$size = $_FILES['upfile']['size'];if(!empty($name)){if($error<=0){if($type =="image/jpeg"){if($size<=100000){if(!is_dir("./upfile/")){mkdir("./upfile/");}$path ="./upfile/".$name;//轉(zhuǎn)換編碼格式//$filename = iconv("UTF-8","gb2312",$filename);if(move_uploaded_file($tmp_name,$path)){echo $path;}}}}} ?>?
轉(zhuǎn)載于:https://www.cnblogs.com/sunhao1987/p/9240185.html
總結(jié)
以上是生活随笔為你收集整理的6.28 头像预览：form方法和ajax方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Java JSON 之 Xml 转 JS
- 下一篇： Web App架构