>백엔드 개발 >PHP 튜토리얼 >PHP Ajax 이미지 파일 비동기 업로드 샘플 코드

PHP Ajax 이미지 파일 비동기 업로드 샘플 코드

WBOY
WBOY원래의
2016-07-25 08:53:071274검색
  1. jQuery.extend({

  2. createUploadIframe: function(id, uri)
  3. {
  4. //프레임 생성
  5. varframeId = 'jUploadFrame' id;
  6. var iframeHtml = '
  • 코드 복사

    index.js 파일:

    1. $(function(){
    2. $("#upload_file").change(function(){
    3. $("#uploadFrom" ).submit();
    4. });
    5. });
    6. function stopSend(str){
    7. var im=" ";
    8. $("#msg").append(im);
    9. }
    코드 복사

    upload.php 파일:

    1. $file=$_FILES['upfile'];
    2. $name=rand(0,500000).dechex (rand(0,10000)).".jpg";
    3. move_uploaded_file($file['tmp_name'],"upload/images/".$name);
    4. //iframe의 js 함수 호출 상위 창
    5. echo "<script>parent.stopSend('$name')</script>";
    6. ?>
    코드 복사

    방법 3, 원본 Ajax 파일 업로드

    1. Html5 Ajax 업로드 파일< ; /title></li> <li> <meta charset="utf-8"></li> <li><script type="text/javascript"></li> <li> var xhr;</li> <li> function createXMLHttpRequest()</li> <li> { </li> <li> if(window.ActiveXObject)</li> <li> {</li> <li> xhr = new ActiveXObject("Microsoft.XMLHTTP");</li> <li> }</li> <li> else if(window.XMLHttpRequest)</li> <li> {</li> <li> xhr = new XMLHttpRequest();</li> <li> }</li> <li> }</li> <li> function UpladFile()</li> <li> {</li> <li> var fileObj = document.getElementById("file").files[0];</li> <li> var FileController = 'upload.php';</li> <li> var form = new FormData();</li> <li> form.append("myfile", fileObj);</li> <li> createXMLHttpRequest();</li> <li> xhr.onreadystatechange = handlerStateChange;</li> <li> xhr.open("post", FileController, true);</li> <li> xhr.send(form);</li> <li> }</li> <li> function handlerStateChange()</li> <li> {</li> <li> if(xhr.readyState == 4 )</li> <li> {</li> <li> if (xhr.status == 200 || xhr.status == 0)</li> <li> {</li> <li>var result = xhr.responseText;</li> <li>var json = eval("( " 결과 ")");</li> <li>alert('picture link:n' json.file);</li> <li> }</li> <li> }</li> <li> }</li> <li></script></li> <li><style> 🎜> .txt{ 높이:28px; 테두리:1px 솔리드 #cdcdcd; 너비:670px;}</li> <li> .mybtn{ background-color:#FFF; line-height:14px;vertical-align:middle;border:1px #CDCDCD;높이:30px; 너비:70px;}</li> <li> .file{ 위치:절대:0; 오른쪽:80px; 불투명도: 0;너비: 260px }</li> <li></style></li> <li></head></li> <li><body></li> <li><div class="form-group"></li> <li> <label class="control - label">picture</label></li> <li> <br/></li> <li> <input type='text' name='textfield' id='textfield' class='txt' /></li> <li> <span onclick="file.click()" class="mybtn">찾아보기...</span></li> <li> <input type="file" name="file" class="file " id ="file" size="28" onchange="document.getElementById('textfield').value=this.value" /></li> <li> <span onclick="UpladFile()" class="mybtn" > 업로드</span></li> <li></div></li> <li></body></li> <li></html></li> <li> </ol></div>코드 복사<em onclick="copycode($('code_SBD'));"></em><p>php대명: </p> <div class="blockcode"> <div id="code_H4G"><ol> <li> <li><?php<li>if(isset($_FILES["myfile"]))<li>{<li>$ret = array( );<li>$uploadDir = 'images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;<li>$dir = dirname(__FILE__).DIRECTORY_SEPARATOR.$uploadDir;<li>file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777));<li>if(!is_array($_FILES["myfile"]["name"])) //단일 파일<li>{ <li>$fileName = time().uniqid().'.'.pathinfo($_FILES["myfile"]["name"])['extension'];<li>move_uploaded_file($_FILES["myfile" ]["tmp_name"],$dir.$fileName);<li>$ret['file'] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;<li>}<li>echo json_encode($ret);<li> }<li>?></li> </ol></div> <em onclick="copycode($('code_H4G'));">复主代码</em> </div> </div> </td></tr></table> <div id="comment_47182" class="cm"> </div> <div id="post_rate_div_47182"></div> <br><br></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명:</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사:<a class="dBlack" title="codeigniter는 캐시를 활성화하고 캐시 방법 공유를 지웁니다." href="https://m.php.cn/ko/faq/315308.html">codeigniter는 캐시를 활성화하고 캐시 방법 공유를 지웁니다.</a></span><span>다음 기사:<a class="dBlack" title="codeigniter는 캐시를 활성화하고 캐시 방법 공유를 지웁니다." href="https://m.php.cn/ko/faq/315311.html">codeigniter는 캐시를 활성화하고 캐시 방법 공유를 지웁니다.</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/1.html" title="cURL을 사용하여 PHP에서 Get 및 Post 요청을 구현하는 방법" class="aBlack">cURL을 사용하여 PHP에서 Get 및 Post 요청을 구현하는 방법</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1.html" title="cURL을 사용하여 PHP에서 Get 및 Post 요청을 구현하는 방법" class="aBlack">cURL을 사용하여 PHP에서 Get 및 Post 요청을 구현하는 방법</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1.html" title="cURL을 사용하여 PHP에서 Get 및 Post 요청을 구현하는 방법" class="aBlack">cURL을 사용하여 PHP에서 Get 및 Post 요청을 구현하는 방법</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1.html" title="cURL을 사용하여 PHP에서 Get 및 Post 요청을 구현하는 방법" class="aBlack">cURL을 사용하여 PHP에서 Get 및 Post 요청을 구현하는 방법</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2.html" title="정규식의 모든 표현식 기호(요약)" class="aBlack">정규식의 모든 표현식 기호(요약)</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>