人人人妻人人人妻人人人,99精品国产综合久久久久五月天 ,欧美白人最猛性XXXXX,日韩AV无码免费播放


News新聞

業(yè)界新聞動(dòng)態(tài)、技術(shù)前沿
Who are we?

您的位置：首頁(yè)      樂(lè)道系統(tǒng)FAQ      PHP+Ajax無(wú)刷新帶進(jìn)度條圖片上傳示例

PHP+Ajax無(wú)刷新帶進(jìn)度條圖片上傳示例

標(biāo)簽： 發(fā)布日期：2017-02-08 00:00:00 260
【CLI】利用Curl下載文件實(shí)時(shí)進(jìn)度條顯示的實(shí)現(xiàn)

項(xiàng)目需求：1.PHP+Ajax無(wú)刷新帶進(jìn)度條圖片上傳，2.帶進(jìn)度條。所需插件：jquery.js，jquery.form.js。

最近在做一個(gè)手機(jī)web項(xiàng)目，需要用到Ajax上傳功圖片能，項(xiàng)目要求PHP無(wú)刷新上傳圖片，并且要帶進(jìn)度條，下面就來(lái)講一下我的實(shí)現(xiàn)方法，先看效果圖

本示例需要使用的是jquery.js，jquery.form.js，demo里面包含有，你可以在文章下方進(jìn)行下載。

第一步，建立前端頁(yè)面index.html

此段是前端展示內(nèi)容，這里需要說(shuō)明的是由于input:file標(biāo)簽顯示不太美觀(guān)，所以我把它隱藏了。而使用一個(gè)a標(biāo)簽.uploadbtn來(lái)調(diào)用file標(biāo)簽的click事件，用來(lái)打開(kāi)并選擇文件。

注意：文件上傳時(shí)form的屬性enctype必須設(shè)置為：multipart/form-data

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>php-ajax無(wú)刷新上傳(帶進(jìn)度條)demo</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width , initial-scale=1.0 , user-scalable=0 , minimum-scale=1.0 , maximum-scale=1.0" />
<script type='text/javascript' src='js/jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='js/jquery.form.js'></script>
<link href="css/style.css" rel="external nofollow" type="text/css" rel="stylesheet"/>
</head>
<body>
<div style="width:500px;margin:10px auto; border:solid 1px #ddd; overflow:hidden; ">
 <form id='myupload' action='upload.php' method='post' enctype='multipart/form-data'>
 <input type="file" id="uploadphoto" name="uploadfile" value="請(qǐng)點(diǎn)擊上傳圖片" style="display:none;" />
 </form>
 <div class="imglist"> </div>
 <p class="res"></p>
 <div class="progress">
 <div class="progress-bar progress-bar-striped"><span class="percent">50%</span></div>
 </div>
 <a href="javascript:void(0);" rel="external nofollow" onclick="uploadphoto.click()" class="uploadbtn">點(diǎn)擊上傳文件</a>
</div>
</body>
</html>