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
你的问题，怎么产生关系？
既然选择图片后上传，那肯定是异步上传了，你的异步上传不返回一个图片地址嘛？
拿到你的图片地址和你的文字，直接插进数据库