1. mvc視圖中怎麼上傳圖片並顯示
如果只是上傳的話那太容易了,如果還要顯示那就難了,因為要顯示的話就不能只向伺服器提交一次請求,必須非同步提交。下面的例子是我親自寫的,非同步提交上傳圖片並預覽。全部代碼都在。
返回到前台頁面的JSON格式對象是以類的對象。
publicclassReturnImage
{
publicstringbig{get;set;}
publicstringsmall{get;set;}
publicstringisSuccessfull{get;set;}
publicstringmessage{get;set;}
}
對於上傳和生成縮略圖,請自行完成,以下是ASP.NETMVC的例子。
publicclassHomeController:Controller
{
//
//GET:/Home/
publicActionResultIndex()
{
returnView();
}
///<summary>
///上傳圖片
///</summary>
///<returns></returns>
publicActionResultUploadImage()
{
//定義錯誤消息
JsonResultmsg=newJsonResult();
try
{
//接受上傳文件
HttpPostedFileBasepostFile=Request.Files["upImage"];
if(postFile!=null)
{
DateTimetime=DateTime.Now;
//獲取上傳目錄轉換為物理路徑
stringuploadPath=Server.MapPath("~/UploadFiles/"+time.Year+"/"+time.ToString("yyyyMMdd")+"/");
//文件名
stringfileName=time.ToString("yyyyMMddHHmmssfff");
//後綴名稱
stringfiletrype=System.IO.Path.GetExtension(postFile.FileName);
//獲取文件大小
longcontentLength=postFile.ContentLength;
//文件不能大於2M
if(contentLength<=1024*2048)
{
//如果不存在path目錄
if(!Directory.Exists(uploadPath))
{
//那麼就創建它
Directory.CreateDirectory(uploadPath);
}
//保存文件的物理路徑
stringsaveFile=uploadPath+fileName+"_big"+filetrype;
try
{
//保存文件
postFile.SaveAs(saveFile);
//保存縮略圖的物理路徑
stringsmall=uploadPath+fileName+"_small"+filetrype;
MakeThumbnail(saveFile,small,320,240,"W");
ReturnImageimage=newReturnImage();
image.big="/UploadFiles/"+time.Year+"/"+time.ToString("yyyyMMdd")+"/"+fileName+"_big"+filetrype;
image.small="/UploadFiles/"+time.Year+"/"+time.ToString("yyyyMMdd")+"/"+fileName+"_small"+filetrype;
msg=Json(image);
}
catch
{
msg=Json("上傳失敗");
}
}
else
{
msg=Json("文件大小超過限制要求");
}
}
else
{
msg=Json("請選擇文件");
}
}
catch(Exceptione)
{
;
}
msg.ContentType="text/html";
returnmsg;
}
///<summary>
由於回答超過最大限制,///生成縮略圖的代碼請向我索取
2. php的 tp上傳圖片修改的時候怎麼在頁面保存原來圖片路徑並可以file重新選圖片
js非同步上傳圖片 原始的上傳方法 在修改的時候。太啰嗦了、
在tp裡面自定義一個上傳文件的方法upload
無論更新還是新增 都直接調用這個介面。
在表單裡面加一個text 和上傳按鈕。
當點擊上傳按鈕 執行非同步上傳。去找個js插件 網路就有js上傳插件 ,你也可以用別的。
這樣 js插件上傳的圖片都會經過upload 方法 裡面處理自己需要的邏輯。最後return 返回圖片的路徑。js插件回調介面修改text的value值。就是文件的地址。修改的時候這個text值就是資料庫裡面圖片的路徑。如果重新上傳了 就自己改變了這個值。提交就行了。
涉及到的基礎 js dom的修改 和非同步請求。 不會就去先看看資料吧
3. 瀏覽器端生成的blob數據怎麼上傳給伺服器端的TP處理
1. 首先嘛,你得在瀏覽器里輸入要網址:
2. 瀏覽器查找域名的IP地址
導航的第一步是通過訪問的域名找出其IP地址。DNS查找過程如下:
瀏覽器緩存 – 瀏覽器會緩存DNS記錄一段時間。 有趣的是,操作系統沒有告訴瀏覽器儲存DNS記錄的時間,這樣不同瀏覽器會儲存個自固定的一個時間(2分鍾到30分鍾不等)。
系統緩存 – 如果在瀏覽器緩存里沒有找到需要的記錄,瀏覽器會做一個系統調用(windows里是gethostbyname)。這樣便可獲得系統緩存中的記錄。
路由器緩存 – 接著,前面的查詢請求發向路由器,它一般會有自己的DNS緩存。
ISP DNS 緩存 – 接下來要check的就是ISP緩存DNS的伺服器。在這一般都能找到相應的緩存記錄。
遞歸搜索 – 你的ISP的DNS伺服器從跟域名伺服器開始進行遞歸搜索,從.com頂級域名伺服器到Facebook的域名伺服器。一般DNS伺服器的緩存中會有.com域名伺服器中的域名,所以到頂級伺服器的匹配過程不是那麼必要了。
DNS遞歸查找如下圖所示:
DNS有一點令人擔憂,這就是像wikipedia.org 或者 facebook.com這樣的整個域名看上去只是對應一個單獨的IP地址。還好,有幾種方法可以消除這個瓶頸:
循環 DNS 是DNS查找時返回多個IP時的解決方案。舉例來說,Facebook.com實際上就對應了四個IP地址。
負載平衡器 是以一個特定IP地址進行偵聽並將網路請求轉發到集群伺服器上的硬體設備。 一些大型的站點一般都會使用這種昂貴的高性能負載平衡器。
地理 DNS 根據用戶所處的地理位置,通過把域名映射到多個不同的IP地址提高可擴展性。這樣不同的伺服器不能夠更新同步狀態,但映射靜態內容的話非常好。
Anycast 是一個IP地址映射多個物理主機的路由技術。 美中不足,Anycast與TCP協議適應的不是很好,所以很少應用在那些方案中。
大多數DNS伺服器使用Anycast來獲得高效低延遲的DNS查找。
3. 瀏覽器給web伺服器發送一個HTTP請求
因為像Facebook主頁這樣的動態頁面,打開後在瀏覽器緩存中很快甚至馬上就會過期,毫無疑問他們不能從中讀取。
所以,瀏覽器將把一下請求發送到Facebook所在的伺服器:
GET HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: facebook.com
Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]
GET 這個請求定義了要讀取的URL: 「」。 瀏覽器自身定義 (User-Agent 頭), 和它希望接受什麼類型的相應 (Accept and Accept-Encoding 頭). Connection頭要求伺服器為了後邊的請求不要關閉TCP連接。
請求中也包含瀏覽器存儲的該域名的cookies。可能你已經知道,在不同頁面請求當中,cookies是與跟蹤一個網站狀態相匹配的鍵值。這樣cookies會存儲登錄用戶名,伺服器分配的密碼和一些用戶設置等。Cookies會以文本文檔形式存儲在客戶機里,每次請求時發送給伺服器。
用來看原始HTTP請求及其相應的工具很多。作者比較喜歡使用fiddler,當然也有像FireBug這樣其他的工具。這些軟體在網站優化時會幫上很大忙。
除了獲取請求,還有一種是發送請求,它常在提交表單用到。發送請求通過URL傳遞其參數(e.g.: )。發送請求在請求正文頭之後發送其參數。
像「」中的斜杠是至關重要的。這種情況下,瀏覽器能安全的添加斜杠。而像「http: //example.com/folderOrFile」這樣的地址,因為瀏覽器不清楚folderOrFile到底是文件夾還是文件,所以不能自動添加 斜杠。這時,瀏覽器就不加斜杠直接訪問地址,伺服器會響應一個重定向,結果造成一次不必要的握手。
4. facebook服務的永久重定向響應
圖中所示為Facebook伺服器發回給瀏覽器的響應:
HTTP/1.1 301 Moved Permanently
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,
pre-check=0
Expires: Sat, 01 Jan 2000 00:00:00 GMT
Location:
P3P: CP="DSP LAW"
Pragma: no-cache
Set-Cookie: made_write_conn=deleted; expires=Thu, 12-Feb-2009 05:09:50 GMT;
path=/; domain=.facebook.com; httponly
Content-Type: text/html; charset=utf-8
X-Cnection: close
Date: Fri, 12 Feb 2011 05:09:51 GMT
Content-Length: 0
伺服器給瀏覽器響應一個301永久重定向響應,這樣瀏覽器就會訪問「」 而非「」。
為什麼伺服器一定要重定向而不是直接發會用戶想看的網頁內容呢?這個問題有好多有意思的答案。
其中一個原因跟搜索引擎排名有 關。你看,如果一個頁面有兩個地址,就像 和,搜索引擎會認為它們是兩個網站,結果造成每一個的搜索鏈接都減少從而降低排名。而搜索引擎知道301永久重定向是 什麼意思,這樣就會把訪問帶www的和不帶www的地址歸到同一個網站排名下。
還有一個是用不同的地址會造成緩存友好性變差。當一個頁面有好幾個名字時,它可能會在緩存里出現好幾次。
5. 瀏覽器跟蹤重定向地址
現在,瀏覽器知道了「」才是要訪問的正確地址,所以它會發送另一個獲取請求:
GET HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
Accept-Language: en-US
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Cookie: lsd=XW[...]; c_user=21[...]; x-referer=[...]
Host:
頭信息以之前請求中的意義相同。
6. 伺服器「處理」請求
伺服器接收到獲取請求,然後處理並返回一個響應。
這表面上看起來是一個順向的任務,但其實這中間發生了很多有意思的東西- 就像作者博客這樣簡單的網站,何況像facebook那樣訪問量大的網站呢!
Web 伺服器軟體
web伺服器軟體(像IIS和阿帕奇)接收到HTTP請求,然後確定執行什麼請求處理來處理它。請求處理就是一個能夠讀懂請求並且能生成HTML來進行響應的程序(像ASP.NET,PHP,RUBY...)。
舉 個最簡單的例子,需求處理可以以映射網站地址結構的文件層次存儲。像這個地 址會映射/httpdocs/folder1/page1.aspx這個文件。web伺服器軟體可以設置成為地址人工的對應請求處理,這樣 page1.aspx的發布地址就可以是。
請求處理
請求處理閱讀請求及它的參數和cookies。它會讀取也可能更新一些數據,並講數據存儲在伺服器上。然後,需求處理會生成一個HTML響應。
所 有動態網站都面臨一個有意思的難點 -如何存儲數據。小網站一半都會有一個SQL資料庫來存儲數據,存儲大量數據和/或訪問量大的網站不得不找一些辦法把資料庫分配到多台機器上。解決方案 有:sharding (基於主鍵值講數據表分散到多個資料庫中),復制,利用弱語義一致性的簡化資料庫。
委 托工作給批處理是一個廉價保持數據更新的技術。舉例來講,Fackbook得及時更新新聞feed,但數據支持下的「你可能認識的人」功能只需要每晚更新 (作者猜測是這樣的,改功能如何完善不得而知)。批處理作業更新會導致一些不太重要的數據陳舊,但能使數據更新耕作更快更簡潔。
7. 伺服器發回一個HTML響應
圖中為伺服器生成並返回的響應:
HTTP/1.1 200 OK
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,
pre-check=0
Expires: Sat, 01 Jan 2000 00:00:00 GMT
P3P: CP="DSP LAW"
Pragma: no-cache
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
X-Cnection: close
Transfer-Encoding: chunked
Date: Fri, 12 Feb 2011 09:05:55 GMT
2b3Tn@[...]
整個響應大小為35kB,其中大部分在整理後以blob類型傳輸。
內容編碼頭告訴瀏覽器整個響應體用gzip演算法進行壓縮。解壓blob塊後,你可以看到如下期望的HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"">
<html xmlns="" xml:lang="en"
lang="en" id="facebook" class=" no_js">
...
關於壓縮,頭信息說明了是否緩存這個頁面,如果緩存的話如何去做,有什麼cookies要去設置(前面這個響應里沒有這點)和隱私信息等等。
請注意報頭中把Content-type設置為「text/html」。報頭讓瀏覽器將該響應內容以HTML形式呈現,而不是以文件形式下載它。瀏覽器會根據報頭信息決定如何解釋該響應,不過同時也會考慮像URL擴展內容等其他因素。
8. 瀏覽器開始顯示HTML
在瀏覽器沒有完整接受全部HTML文檔時,它就已經開始顯示這個頁面了:
9. 瀏覽器發送獲取嵌入在HTML中的對象
在瀏覽器顯示HTML時,它會注意到需要獲取其他地址內容的標簽。這時,瀏覽器會發送一個獲取請求來重新獲得這些文件。
下面是幾個我們訪問facebook.com時需要重獲取的幾個URL:
圖片
…
CSS 式樣表
…
JavaScript 文件
…
這些地址都要經歷一個和HTML讀取類似的過程。所以瀏覽器會在DNS中查找這些域名,發送請求,重定向等等...
但 不像動態頁面那樣,靜態文件會允許瀏覽器對其進行緩存。有的文件可能會不需要與伺服器通訊,而從緩存中直接讀取。伺服器的響應中包含了靜態文件保存的期限 信息,所以瀏覽器知道要把它們緩存多長時間。還有,每個響應都可能包含像版本號一樣工作的ETag頭(被請求變數的實體值),如果瀏覽器觀察到文件的版本 ETag信息已經存在,就馬上停止這個文件的傳輸。
試著猜猜看「fbcdn.net」在地址中代表什麼?聰明的答案是"Facebook內容分發網路"。Facebook利用內容分發網路(CDN)分發像圖片,CSS表和JavaScript文件這些靜態文件。所以,這些文件會在全球很多CDN的數據中心中留下備份。
靜態內容往往代表站點的帶寬大小,也能通過CDN輕松的復制。通常網站會使用第三方的CDN。例如,Facebook的靜態文件由最大的CDN提供商Akamai來託管。
舉例來講,當你試著ping static.ak.fbcdn.net的時候,可能會從某個akamai.net伺服器上獲得響應。有意思的是,當你同樣再ping一次的時候,響應的伺服器可能就不一樣,這說明幕後的負載平衡開始起作用了。
10. 瀏覽器發送非同步(AJAX)請求
在Web 2.0偉大精神的指引下,頁面顯示完成後客戶端仍與伺服器端保持著聯系。
以 Facebook聊天功能為例,它會持續與伺服器保持聯系來及時更新你那些亮亮灰灰的好友狀態。為了更新這些頭像亮著的好友狀態,在瀏覽器中執行的 JavaScript代碼會給伺服器發送非同步請求。這個非同步請求發送給特定的地址,它是一個按照程式構造的獲取或發送請求。還是在Facebook這個例 子中,客戶端發送給ajax/chat/buddy_list.php一個發布請求來獲取你好友里哪個 在線的狀態信息。
提起這個模式,就必須要講講"AJAX"-- 「非同步JavaScript 和 XML」,雖然伺服器為什麼用XML格式來進行響應也沒有個一清二白的原因。再舉個例子吧,對於非同步請求,Facebook會返回一些JavaScript的代碼片段。
除了其他,fiddler這個工具能夠讓你看到瀏覽器發送的非同步請求。事實上,你不僅可以被動的做為這些請求的看客,還能主動出擊修改和重新發送它們。AJAX請求這么容易被蒙,可著實讓那些計分的在線游戲開發者們郁悶的了。(當然,可別那樣騙人家~)
Facebook聊天功能提供了關於AJAX一個有意思的問題案例:把數據從伺服器端推送到客戶端。因為HTTP是一個請求-響應協議,所以聊天伺服器不能把新消息發給客戶。取而代之的是客戶端不得不隔幾秒就輪詢下伺服器端看自己有沒有新消息。
這些情況發生時長輪詢是個減輕伺服器負載挺有趣的技術。如果當被輪詢時伺服器沒有新消息,它就不理這個客戶端。而當尚未超時的情況下收到了該客戶的新消息,伺服器就會找到未完成的請求,把新消息做為響應返回給客戶端。
4. php 非同步上傳圖片幾種方法總結
代碼如下
form action="upload.php" id="form1" name="form1" enctype="multipart/form-data" method="post" target="uploadIframe"> <!--上傳圖片頁面 --> </form> <iframe name="uploadIframe" id="uploadIframe" style="display:none"></iframe>
然後後台處理完上傳圖片邏輯後返回給前台,利用ajax修改當前頁面DOM對象實現無刷新上傳圖片的友好功能。
實例
代碼如下
a.html <form enctype="multipart/form-data" action="a.php" target="ifram_sign" method="POST"> <input name="submit" id="submit" value="" type="hidden"> <label>上傳文件: <input name="test_file" type="file" id="test_file" size="48"></label> <input type="image" value="立即上傳" id="submit_btn"> </form><iframe name="ifram_sign" src="" frameborder="0" height="0" width="0" marginheight="0" marginwidth="0"></iframe>
php代碼:
代碼如下
<?php
if ($_files["test_file"]["error"] > 0)
{
echo "Error: " . $_files["test_file"]["error"] . "<br />";
}
else
{
//這里的判斷圖片屬性的方法就不寫了。自己擴展一下。
$filetype=strrchr($_files["test_file"]["name"],".");
$filetype=substr($filetype,1,strlen($filetype));
$filename="img/".time("YmdHis").".".$filetype;
move_uploaded_file($_files["test_file"]["tmp_name"],$filename);
echo '<script >alert(1)</script>';
$return="parent.document.getElementByIdx_x('mpic".$pageset_id."').innerhtml='".$dataimgpath."'";
echo "<script >alert('上傳成功')</script>";
echo "<script>{$return}</script>";
}
?>
其實jquery ajax圖片非同步上傳
html:
<!DOCTYPE html PUBLIC "-//W3C//dtd Xhtml 1.0 transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
<title>圖片非同步上傳</title>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css">
<body>
<div class="frm">
<form name="uploadFrom" id="uploadFrom" action="upload.php" method="post" target="tarframe" enctype="multipart/form-data">
<input type="file" id="upload_file" name="upfile">
</form>
<iframe src="" width="0" height="0" style="display:none;" name="tarframe"></iframe>
</div>
<div id="msg">
</div>
</body>
</html>
index.js
$(function(){
$("#upload_file").change(function(){
$("#uploadFrom").submit();
});
});
function stopSend(str){
var im="<img src='upload/images/"+str+"'>";
$("#msg").append(im);
}
upload.php
<?php
$file=$_files['upfile'];
$name=rand(0,500000).dechex(rand(0,10000)).".jpg";
move_uploaded_file($file['tmp_name'],"upload/images/".$name);
//調用iframe父窗口的js 函數
echo "<script>parent.stopSend('$name')</script>";
?>
非同步上傳圖片幾種方法
5. thinkphp6圖片上傳成功後怎樣返回具體的url
$path = str_replace('\\', '/', $savename);
6. Thinkphp上傳圖片手動剪切功能誰有tp框架
<?php
include'config.php';
classcontroller
{
//ajax上傳頭像圖片
publicfunctionajax_upload_avatar()
{
include('models'.DIRECTORY_SEPARATOR.'uploader.php');
$uploader=newuploader(explode(',',ALLOW_UPLOAD_IMAGE_TYPES),MAX_UPLOAD_SIZE);
$result=$uploader->upload('tmp'.DIRECTORY_SEPARATOR);//先保存到臨時文件夾
$reponse=newstdClass();
if(isset($result['success'])&&$result['success'])
{
include('models'.DIRECTORY_SEPARATOR.'gd.php');
$src_path='tmp'.DIRECTORY_SEPARATOR.$uploader->get_real_name();
$gd=newgd();
$gd->open($src_path);
if($gd->is_image())
{
if($gd->get_width()<AVATAR_WIDTH)
{
$reponse->success=false;//傳遞給file-uploader表示伺服器端已處理
$reponse->description='您上傳的圖片寬度('.$gd->get_width().'像素)過小!最小需要'.AVATAR_WIDTH.'像素。';
}
elseif($gd->get_height()<AVATAR_HEIGHT)
{
$reponse->success=false;//傳遞給file-uploader表示伺服器端已處理
$reponse->description='您上傳的圖片高度('.$gd->get_height().'像素)過小!最小需要'.AVATAR_HEIGHT.'像素。';
}
else
{
$reponse->success=true;
$reponse->tmp_avatar=$uploader->get_real_name();
if($gd->get_width()>AVATAR_MAX_WIDTH||$gd->get_height()>AVATAR_MAX_HEIGHT)
{
//圖片過大時按比例縮小,防止超大圖片撐破頁面
$gd->resize_to(AVATAR_MAX_WIDTH,AVATAR_MAX_HEIGHT,'scale');
$gd->save_to($src_path);
}
}
}
}
elseif(isset($result['error']))
{
$reponse->success=false;
$reponse->description=$result['error'];
}
header('Content-type:application/json');
echojson_encode($reponse);
}
//ajax裁切頭像圖片
publicfunctionajax_crop()
{
$tmp_avatar=$_POST['tmp_avatar'];
$x1=$_POST['x1'];
$y1=$_POST['y1'];
$x2=$_POST['x2'];
$y2=$_POST['y2'];
$w=$_POST['w'];
$h=$_POST['h'];
$reponse=newstdClass();
$src_path='tmp'.DIRECTORY_SEPARATOR.$tmp_avatar;
if(!file_exists($src_path))
{
$reponse->success=false;
$reponse->description='未找到圖片文件';
}
else
{
include('models'.DIRECTORY_SEPARATOR.'gd.php');
$gd=newgd();
$gd->open($src_path);
if($gd->is_image())
{
$gd->crop($x1,$y1,$w,$h);
$gd->resize_to(AVATAR_WIDTH,AVATAR_HEIGHT,'scale_fill');
$avatar_name=date('YmdHis').'_'.md5(uniqid()).'.'.$gd->get_type();
$gd->save_to('avatars'.DIRECTORY_SEPARATOR.$avatar_name);
setcookie('avatar',$avatar_name,time()+86400*30);//本示常式序僅在cookie中保存
/*
實際應用中會有更多保存頭像代碼
......
*/
@unlink($src_path);
$reponse->success=true;
$reponse->avatar=$avatar_name;$reponse->description='';
}
else
{
$reponse->success=false;
$reponse->description='該圖片文件不是有效的圖片';
}
}
header('Content-type:application/json');
echojson_encode($reponse);
}
}
$task=isset($_GET['task'])?$_GET['task']:'';
if($task!='')
{
$instance=newcontroller();
$instance->$task();
}
?>
7. 【PHP】非同步上傳圖片怎麼和表單提交的記錄綁定
你非同步上傳完成後總該返回該圖片的路徑吧,表單提交的時候連同所有返回的圖片路徑一起提交啊
8. tp5文件上傳時怎麼把圖片路徑和post數據一起存到資料庫(圖片使用ajax提交post數據使用form提交)
ajax上傳圖片成功後返回圖片路徑
前端再把這個路徑存到一個隱藏欄位里,form一起提交
9. tp6 開啟路由完全匹配怎麼訪問static目錄下的靜態資源
設置一個介面來訪問這些圖片資源,讀取圖片二進制數據轉base64在輸出到前端
10. TP-LINK的無線路由器可以上網但上傳不了圖片,怎麼辦其他軟體,QQ正常,可以看電影,就是上傳不了圖片
首先你重啟一下電腦,然後再試一次,如果不行就重啟一下瀏覽器,如果不行就重設置瀏覽器。如果不行就打電話給微博客服,如果還不行就換一個寬頻吧。