ajax多圖片上傳

『壹』 jquery ajax上傳圖片問題

現在基本上沒有真正的AJAX圖片上傳，你想多了
都是偽AJAX上傳
但是如果是HTML5，倒是有可能，使html5的 canvas，可以把圖片序例化成base64字元串，把這個字元串傳到伺服器，處理一下，再保存就OK了，

我想知道你直接ajax怎麼傳，把你本地路徑傳過去嗎~~~~~
肯定是不行的

『貳』 asp.net 用Ajax上傳多張圖片

建議使用jquery的上傳插件：jquery.multfile.js，非常方便~可以到相關網站上看下，真的很簡單~
網站：http://www.fyneworks.com/jquery/multiple-file-upload/

『叄』 php ajax如何上傳圖片

如果為了追求方便，直接使用jquery+uploadify ,這個組合封裝了許多上傳功能，可以實現無縫上傳。比如可以用戶選擇圖片直接自動上傳，然後顯示出來（當然這個腳本是要自己寫的）,還有flash動畫，按鈕、進度條比較炫。而且有php後台腳本，甚至不用做修改。但是缺點是不支持iphone ipad。對ie 搜狗 和國內比較渣水的瀏覽器支持不好。
其次可以使用jquery+jqform，腳本簡單，但是沒有flash特效，樣式比較單一，不過其他功能比較全。

最後就是用原生，反正我是寫不出來……

『肆』 ajax上傳「多張圖片「」後PHP返回HTML的的路徑怎樣插入MySQL資料庫，單個欄位存儲還是多個欄位存儲

多個圖片上傳，可以拆分成單個的上傳，每一個圖片對應一條數據，然後記錄圖片的信息和存儲路徑等。
然後保存的時候，保存圖片記錄的id就可以，到時候可以根據id獲取到相關的圖片信息。
如果使用oss等存儲空間，也是他們會每一個圖片返回給你一個圖片路徑，你保存圖片的網路地址就行，這個時候可以使用一個欄位然後通過分隔符，比如‖進行分割，當然，如果圖片數量是固定的，也可以用多個欄位分別存儲路徑。
最後，推薦使用單個欄位分隔，因為一般不需要對圖片欄位進行檢索，如果需要的話，單個欄位查詢後，再封裝介面返回也可以。

『伍』 java中如何實現Ajax方式上傳圖片

你好，據我所知，Ajax不能上傳圖片，因為上傳圖片得把圖片的二進制數據傳送給WEB伺服器。而Ajax不能完成。

如果樓主指點是無刷新上傳圖片。即不更改當前頁面上傳圖片，利用STRUTS並在HTML頁面中加一個iframe標簽，CSS DISPLAY屬性為NONE 而上傳圖片的表單的TARGET屬性等於這個iframe的名字。

『陸』 ajax可以實現圖片上傳嗎

可以實現。

1：先說我們平時接觸到的介面都是後台需要你給他傳遞幾個參數，你就把參數對應的值 給他們就行了

eg：

『柒』 jquery ajax多圖上傳顯示怎麼寫

首先我們在頁面上放置個上傳按鈕，使用POST提交到ajax.php。#ul_pics 用來顯示上傳完畢後的圖片。
<a class="btn" id="btn">上傳圖片</a> 最大500KB，支持jpg，gif，png格式。
<ul id="ul_pics" class="ul_pics clearfix"></ul>
接著，載入jQuery.js和plupload.full.min.js插件。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="plupload/plupload.full.min.js"></script>
當點擊按鈕「上傳圖片」後，彈出選擇文件對話框，按 "ctrl" 選擇多圖片上傳。然後調用 uploader.start() 方法，開始上傳。上傳中間過程我們可以用 UploadProgress 方法來顯示文件進度，最後通過 FileUploaded 來顯示對應的圖片。通過瀏覽器控制台，會發現上傳一張圖片，會向後台ajax.php請求一次。
var uploader = new plupload.Uploader({ //創建實例的構造方法
runtimes: 'html5,flash,silverlight,html4',
//上傳插件初始化選用那種方式的優先順序順序
browse_button: 'btn',
// 上傳按鈕
url: "ajax.php",
//遠程上傳地址
flash_swf_url: 'plupload/Moxie.swf',
//flash文件地址
silverlight_xap_url: 'plupload/Moxie.xap',
//silverlight文件地址
filters: {
max_file_size: '500kb',
//最大上傳文件大小（格式100b, 10kb, 10mb, 1gb）
mime_types: [ //允許文件上傳類型
{
title: "files",
extensions: "jpg,png,gif"
}]
},
multi_selection: true,
//true:ctrl多文件上傳, false 單文件上傳
init: {
FilesAdded: function(up, files) { //文件上傳前
if ($("#ul_pics").children("li").length > 30) {
alert("您上傳的圖片太多了！");
uploader.destroy();
} else {
var li = '';
plupload.each(files,
function(file) { //遍歷文件
li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
});
$("#ul_pics").append(li);
uploader.start();
}
},
UploadProgress: function(up, file) { //上傳中，顯示進度條
$("#" + file.id).find('.bar').css({
"width": file.percent + "%"
}).find(".percent").text(file.percent + "%");
},
FileUploaded: function(up, file, info) { //文件上傳成功的時候觸發
var data = JSON.parse(info.response);
$("#" + file.id).html("<div class='img'><img src='" + data.pic + "'/></div><p>" + data.name + "</p>");
},
Error: function(up, err) { //上傳出錯的時候觸發
alert(err.message);
}
}
});
uploader.init();

『捌』 如何用Ajax實現多文件上傳

jquery 實現多個上傳文件教程：
首先創建解決方案,添加jquery的js和一些資源文件(如圖片和進度條顯示等):
1
2
3
4
5
jquery-1.3.2.min.js
jquery.uploadify.v2.1.0.js
jquery.uploadify.v2.1.0.min.js
swfobject.js
uploadify.css
1、頁面的基本代碼如下
這里用的是aspx頁面(html也是也可的)
頁面中引入的js和js函數如下：
1
2
3
4
5
6
7
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />

</script>
js函數：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript">
$(document).ready(function () {

$("#uploadify").uploadify({
'uploader': 'image/uploadify.swf', //uploadify.swf文件的相對路徑，該swf文件是一個帶有文字BROWSE的按鈕，點擊後淡出打開文件對話框
'script': 'Handler1.ashx',// script ： 後台處理程序的相對路徑
'cancelImg': 'image/cancel.png',
'buttenText': '請選擇文件',//瀏覽按鈕的文本，默認值：BROWSE。
'sizeLimit':999999999,//文件大小顯示
'floder': 'Uploader',//上傳文件存放的目錄
'queueID': 'fileQueue',//文件隊列的ID，該ID與存放文件隊列的div的ID一致
'queueSizeLimit': 120,//上傳文件個數限制
'progressData': 'speed',//上傳速度顯示
'auto': false,//是否自動上傳
'multi': true,//是否多文件上傳
//'onSelect': function (e, queueId, fileObj) {
// alert("唯一標識:" + queueId + "\r\n" +
// "文件名：" + fileObj.name + "\r\n" +
// "文件大小：" + fileObj.size + "\r\n" +
// "創建時間：" + fileObj.creationDate + "\r\n" +
// "最後修改時間：" + fileObj.modificationDate + "\r\n" +
// "文件類型：" + fileObj.type);

// }
'onQueueComplete': function (queueData) {
alert("文件上傳成功！");
return;
}

});
});
頁面中的控制項代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<form id="form1" runat="server">
<div id="fileQueue">
</div>
<div>
<p>
<input type="file" name="uploadify" id="uploadify"/>
<input id="Button1" type="button" value="上傳" onclick="javascript: $('#uploadify').uploadifyUpload()" />
<input id="Button2" type="button" value="取消" onclick="javascript:$('#uploadify').uploadifyClearQueue()" />
</p>
</div>
</form>
</body>
函數主要參數：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function() {
$('#fileInput1').fileUpload({
'uploader': 'uploader.swf',//不多講了
'script': '/AjaxByJQuery/file.do',//處理Action
'cancelImg': 'cancel.png',
'folder': '',//服務端默認保存路徑
'scriptData':{'methed':'uploadFile','arg1','value1'},
//向後台傳遞參數,methed,arg1為參數名,uploadFile,value1為對應的參數值,服務端通過request["arg1"]
'buttonText':'UpLoadFile',//按鈕顯示文字,不支持中文,解決方案見下
//'buttonImg':'圖片路徑',//通過設置背景圖片解決中文問題,就是把背景圖做成按鈕的樣子
'multi':'true',//多文件上傳開關
'fileExt':'*.xls;*.csv',//文件過濾器
'fileDesc':'.xls',//文件過濾器 詳解見文檔
'onComplete' : function(event,queueID,file,serverData,data){
//serverData為伺服器端返回的字元串值
alert(serverData);
}
});
});
後台一般處理文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
using System;
using System.Collections.Generic;
using System.Linq;
using System.IO;
using System.Net;
using System.Web;
using System.Web.Services;
namespace fupload
{
/// <summary>
/// Handler1 的摘要說明
/// </summary>
public class Handler1 : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";

HttpPostedFile file = context.Request.Files["Filedata"];//對客戶端文件的訪問

string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";//伺服器端文件保存路徑

if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);//創建服務端文件夾
}

file.SaveAs(uploadPath + file.FileName);//保存文件
context.Response.Write("上傳成功");
}

else
{
context.Response.Write("0");
}

}

public bool IsReusable
{
get
{
return false;
}
}
}
}
以上方式基本可以實現多文件的上傳，大文件大小是在控制在10M以下/。

『玖』 CI如何ajax方式上傳圖片

方法如下：

1、新建一個CI框架項目ajax，在controllers文件夾下新建控制器img，在img控制器下新建方法index，如下:

注意事項：

使用ajax，要引入js文件，比如jquery-1.7.2.min.js，否則ajax不執行。

『拾』 php ajax 多圖上傳的問題

人家微博肯定有單圖的圖片伺服器的，跟又拍似的，有專門的上傳圖片介面，返回一個json，json裡面是一堆地址，比如: image.a.com/32_32.jpg,image.a.com/100_100.jpg

你的問題，怎麼產生關系？

既然選擇圖片後上傳，那肯定是非同步上傳了，你的非同步上傳不返回一個圖片地址嘛？

拿到你的圖片地址和你的文字，直接插進資料庫