當前位置：
首頁 >
6.28 头像预览：form方法和ajax方法
發布時間：2025/6/17
40
豆豆
生活随笔
收集整理的這篇文章主要介紹了
6.28 头像预览：form方法和ajax方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一用form實現頭像預覽
<!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 屬性規定在何處打開 action URL。--><input type="file" name="upfile" id="upfile" value="" οnchange="$('#sc_form').submit()"/></div></form><!--<iframe> 標簽規定一個內聯框架。一個內聯框架被用來在當前 HTML 文檔中嵌入另一個文檔。--><iframe id="sc" name="sc" src="" width="" height=""><!--PHP傳過來的js代碼--></iframe> </body> </html> <script type="text/javascript">//當提交表單時，會發生 submit 事件。/*function aa(){$("#sc_form").submit();}*/function showImage(url){//alert(url);$("#showing").css("background-image","url("+url+")");} </script>============================處理頁面=======================================
<?php
? ??? ?? //var_dump($_FILES['upfile']);
?? ?? $name = $_FILES['upfile']['name'];
?? ?? $type = $_FILES['upfile']['type'];
?? ?? $tmp_name = $_FILES['upfile']['tmp_name'];//儲存的臨時文件名，一般是系統默認。
?? ?? $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;
?? ? ??? ??? ??? ??? ?//轉換編碼格式
??????????????????? //$filename = iconv("UTF-8","gb2312",$filename);
?? ? ??? ??? ??? ??? ?if(move_uploaded_file($tmp_name,$path)){
?? ? ??? ??? ??? ??? ??? ?echo "<script> window.parent.showImage('{$path}');</script>";
?? ? ??? ??? ??? ??? ??? //在iframe的父級當前頁面調用js代碼
?? ? ??? ??? ??? ??? ?}
?? ? ??? ??? ??? ?}
?? ? ??? ??? ?}
?? ? ??? ?}
?? ?? }
?>
二 用ajax方法實現頭像預覽
<!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("請選擇要上傳的文件");return;}$.ajaxFileUpload({type:"post",url:"chuli2.php",//這是服務器處理的代碼secureuri:false,//是否啟用安全提交，默認為falsefileElementId:'upfile',//上傳文件的id，name屬性名dataType:"text",//返回值類型，一般設置為json，application/jsondata:{},//傳遞參數到服務器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'];//儲存的臨時文件名，一般是系統默認。$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;//轉換編碼格式//$filename = iconv("UTF-8","gb2312",$filename);if(move_uploaded_file($tmp_name,$path)){echo $path;}}}}} ?>?
轉載于:https://www.cnblogs.com/sunhao1987/p/9240185.html
總結
以上是生活随笔為你收集整理的6.28 头像预览：form方法和ajax方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java JSON 之 Xml 转 JS
- 下一篇： Web App架构