htmlajax圖片上傳
㈠ ajaxFileUpload非同步上傳圖片,伺服器文件叫多,如何刪除啊~~
可以做個批量清理的小程序,把所有上傳的圖片,都存在資料庫里,然後遍歷上傳的這個目錄,讀取到文件名以後,去資料庫查,要是不存在的話,說明這張圖是沒有用的,刪除~
㈡ 用jquery實現ajax 上傳圖片提交到php
好像不可以吧,瀏覽器為了安全不能用javascript讀取本地文件的
㈢ jqueryajax不能上傳圖片
不能上傳的原因可能是jquery插件使用不正確。
解決方法:
1、在head之間加入jquery引用
<scripttype="text/javascript" src="jquery.js"></script>
<scriptsrc="project/js/jquery.form.js" type="text/javascript"></script>
<scriptsrc="project/js/fileload.js" type="text/javascript"></script>
2、定義fileload.js,代碼如下:
function createHtml(obj) {
var htmstr = [];
htmstr.push( "<form id='_fileForm' enctype='multipart/form-data'>");
htmstr.push( "<table cellspacing="0" cellpadding="3" style="margin:0 auto; margin-top:20px;">");
htmstr.push( "<tr>");
htmstr.push( "<td class="tdt tdl">請選擇文件:</td>");
htmstr.push( "<td class="tdt tdl"><input id="loadcontrol" type="file" name="filepath" id="filepath" /></td>");
htmstr.push( "<td class="tdt tdl tdr"><input type="button" onclick="fileloadon()" value="上傳"/></td>");
htmstr.push( "</tr>");
htmstr.push( "<tr> <td class="tdt tdl tdr" colspan='3'style='text-align:center;'><div id="msg"> </div></td> </tr>");
htmstr.push( "<tr> <td class="tdt tdl tdr" style=" vertical-align:middle;">圖片預覽:</td> <td class="tdt tdl tdr" colspan="2"><div style="text-align:center;"><img src="project/Images/NoPhoto.jpg"/></div></td> </tr>");
htmstr.push( "</table>")
htmstr.push( "</form>");
obj.html(htmstr.join(""));
}
function fileloadon() {
$("#msg").html("");
$("img").attr({ "src": "project/Images/processing.gif" });
$("#_fileForm").submit(function () {
$("#_fileForm").ajaxSubmit({
type: "post",
url: "project/help.aspx",
success: function (data1) {
var remsg = data1.split("|");
var name = remsg[1].split("/");
if (remsg[0] == "1") {
var type = name[4].substring(name[4].indexOf("."), name[4].length);
$("#msg").html("文件名:" + name[name.length - 1] + " --- " + remsg[2]);
switch (type) {
case ".jpg":
case ".jpeg":
case ".gif":
case ".bmp":
case ".png":
$("img").attr({ "src": remsg[1] });
break;
default:
$("img").attr({ "src": "project/Images/msg_ok.png" });
break;
}
} else {
$("#msg").html("文件上傳失敗:" + remsg[2]);
$("img").attr({ "src": "project/Images/msg_error.png" });
}
},
error: function (msg) {
alert("文件上傳失敗");
}
});
return false;
});
$("#_fileForm").submit();
}
3、服務端處理上傳。
protected void Page_Load(object sender, EventArgs e)
{
try
{
HttpPostedFile postFile = Request.Files[0];
//開始上傳
string _savedFileResult = UpLoadFile(postFile);
Response.Write(_savedFileResult);
}
catch(Exception ex)
{
Response.Write("0|error|上傳提交出錯");
}
}
public string UpLoadFile(HttpPostedFile str)
{
return UpLoadFile(str, "/UpLoadFile/");
}
public string UpLoadFile(HttpPostedFile httpFile, string toFilePath)
{
try
{
//獲取要保存的文件信息
string filerealname = httpFile.FileName;
//獲得文件擴展名
string fileNameExt = System.IO.Path.GetExtension(filerealname);
if (CheckFileExt(fileNameExt))
{
//檢查保存的路徑 是否有/結尾
if (toFilePath.EndsWith("/") == false) toFilePath = toFilePath + "/";
//按日期歸類保存
string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/";
if (true)
{
toFilePath += datePath;
}
//物理完整路徑
string toFileFullPath = System.Web.HttpContext.Current.Request.PhysicalApplicationPath + toFilePath;
//檢查是否有該路徑 沒有就創建
if (!System.IO.Directory.Exists(toFileFullPath))
{
Directory.CreateDirectory(toFileFullPath);
}
//得到伺服器文件保存路徑
string toFile = Server.MapPath("~" + toFilePath);
string f_file = getName(filerealname);
//將文件保存至伺服器
httpFile.SaveAs(toFile + f_file);
return "1|" + toFilePath + f_file + "|" + "文件上傳成功";
}
else
{
return "0|errorfile|" + "文件不合法";
}
}
catch (Exception e)
{
return "0|errorfile|" + "文件上傳失敗,錯誤原因:" + e.Message;
}
}
/// <summary>
/// 獲取文件名
/// </summary>
/// <param name="fileNamePath"></param>
/// <returns></returns>
private string getName(string fileNamePath)
{
string[] name = fileNamePath.Split('\');
return name[name.Length - 1];
}
/// <summary>
/// 檢查是否為合法的上傳文件
/// </summary>
/// <param name="_fileExt"></param>
/// <returns></returns>
private bool CheckFileExt(string _fileExt)
{
string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg", ".rar",".png" };
for (int i = 0; i < allowExt.Length; i++)
{
if (allowExt[i] == _fileExt) { return true; }
}
return false;
}
public static string GetFileName()
{
Random rd = new Random();
StringBuilder serial = new StringBuilder();
serial.Append(DateTime.Now.ToString("HHmmss"));
serial.Append(rd.Next(100, 999).ToString());
return serial.ToString();
}
4、運行defualt.aspx頁面以後顯示的效果是:
㈣ PHP 用AJAX 做多文件上傳
比較推薦使用swfupload上傳代碼,它是把swf和javascript結合起來,做成上傳代碼。功能應該是當前最豐富的。
它可以實現純粹html、javascrip難以逾越的功能:
(1)可以同時上傳多個文件;
(2)類似AJAX的無刷新上傳;
(3)可以顯示上傳進度;
(4)良好的瀏覽器兼容性;
目前QQ空間和博客網站,比較先進的圖片上傳也是基於swf和js代碼結合的做法。
關於swfupload,你可以詳細去網路上看,不重復了。
http://ke..com/view/1332553.htm
㈤ extjs怎麼使圖片上傳時顯示預覽
這個我做過,不難,思路給你
1.是當文本框內容發生改變的時候就將圖片上傳到伺服器(如果圖片小,用戶是感覺不到你已經做了上傳操作的。)
2.當伺服器接受到這個圖片的時候,將其放入到一個臨時文件夾中並返回給前台一個圖片路徑(圖片流也可以)。
3.Ajax請求會有一個相應,在伺服器端成功接受到上傳的圖片後,返回給Ajax一個Reponse,這個Reponse里包含一個圖片路徑。
4.ExtJS在前台獲取success里的responseText之後(也就是圖片路徑)將默認圖片的src指向從後台反饋回來的圖片路徑。
現在圖片就會現實出來
流程是:
用戶選擇圖片-->
觸發文本框改變事件--->
在事件中通過AJAX將圖片上傳給伺服器--->
伺服器將圖片名稱修改為UUID以免重復,並將此圖片的路徑返回給前台--->
前台AJAX請求的回調函數中獲取responseText,也就是圖片路徑--->
設置默認圖片的src為responseText---->
用戶重新選擇的時候(例如用戶不喜歡這張圖)--->
在文本框改變事件中通過AJAX將圖片上傳(包括先前上傳的圖片名稱)--->
後台根據參數先刪除臨時圖片--->
重復以上的步驟直到用戶確定
需要注意的問題:
1.當用戶改變了圖片之後,需要把上一次的臨時圖片文件刪除掉,以免出現垃圾圖片過多。
2.每次上傳圖片的時候要在後面跟上一個隨機參數(因為如果請求路徑和參數相同,瀏覽器不會再繼續發送請求)。通常情況下使用new Date()就可以了例如
"uploadImag.do?method=uploadImage&randomParam="+new Date()
3.圖片太大的話,效果不是很好。
4.當用戶點擊確定後,將臨時文件里的圖片放置到你的正式圖片存放目錄下即可。
5.圖片上傳到後台使用UUID改名字,否則可能有重復
㈥ 基於HTML5的多圖Ajax上傳的php後台接收並獲取圖片寬高等信息
//但是為什麼我用file_exists()判斷文件是否存在時,得到的結果卻是不存在呢
這句話後面加一句
$file='../uploads/' . $file;
你都把文件存成這個文件了 還用原來的文件名判斷能行嗎
後面的錯誤也是一樣的
也可以直接把後面兩個$file改掉
if(!file_exists('../uploads/' . $file)){
$src_info = @getimagesize('../uploads/' . $file);
㈦ web前端上傳圖片的幾種方法
下面給你介紹3種web前端上傳圖片的方法:
1.表單上傳
最傳統的圖片上傳方式是form表單上傳,使用form表單的input[type=」file」]控制項,打開系統的文件選擇對話框,從而達到選擇文件並上傳的目的。
ajax無刷新上傳
Ajax無刷新上傳的方式,本質上與表單上傳無異,只是把表單里的內容提出來採用ajax提交,並且由前端決定請求結果回傳後的展示結果。
3.各類插件上傳
當上傳的需求要求可預覽、顯示上傳進度、中斷上傳過程、大文件分片上傳等等,這時傳統的表單上傳很難實現這些功能,我們可以藉助現有插件完成。
如網路上傳插件Web Uploader、jQuery圖片預覽插件imgPreview 、拖拽上傳與圖像預覽插件Dropzone.js等等,大家可根據項目實際需求選擇適合的插件。
㈧ 用aspupload如何同時上傳兩張圖片,並以新命名的方式把路徑保存到資料庫求高手解決
ajax非同步。
圖1圖2分別非同步提交圖片到後台。新名字的話也是後台處理的。圖片存在空間里,把圖片名存在資料庫里。輸出圖片名到前台
前台圖1圖2後面可分別設一個隱藏的 input 用來ajax返回各自的圖片名。
總的提交按鈕只提交隱藏的input即可。(input里是圖片名,可同時提交多個input)
暫無圖片在第一次載入html時載入。每一次ajax上傳圖片除了返回圖片名到對應的input外,還同時js動態輸出新img標簽代替對應的暫無圖片,新img標簽要寫好完整的圖片地址。