当前位置:首页 » 文件管理 » 图片上传的ajax代码

图片上传的ajax代码

发布时间: 2024-12-17 16:13:18

① Jquery上传图片提交到一般处理程序中返回图片路径

data:null
传递给服务器的数据为空,当然没有接收到文件数据。
上传文件时一般使用ajaxFileUpload方法。

② img如何接收jquery ajax异步上传的动态图片

你的表述没看懂,jquery 异步上传过后获取路径 直接给img 的src赋值不就完了?

③ 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">&nbsp;</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页面以后显示的效果是:

④ JS ajaxFileUpload 传参数的时候 有没有和ajax一样的 type:'post' 的设置

语法:$.ajaxFileUpload([options])
options参数说明:
1、url 上传处理程序地址。
2,fileElementId 需要上传的文件域的ID,即<input type="file">的ID。
3,secureuri 是否启用安全提交,默认为false。
4,dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。
5,success提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
6,error 提交失败自动执行的处理函数。
7,data 自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。
8, type 当要提交自定义参数时,这个参数要设置成post

⑤ PHP 用AJAX 做多文件上传

比较推荐使用swfupload上传代码,它是把swf和javascript结合起来,做成上传代码。功能应该是当前最丰富的。

它可以实现纯粹html、javascrip难以逾越的功能:
(1)可以同时上传多个文件;
(2)类似AJAX的无刷新上传;
(3)可以显示上传进度;
(4)良好的浏览器兼容性;

目前QQ空间和博客网站,比较先进的图片上传也是基于swf和js代码结合的做法。

关于swfupload,你可以详细去网络上看,不重复了。

http://ke..com/view/1332553.htm

热点内容
吃鸡安卓手机为什么不能重力开火 发布:2024-12-17 18:52:46 浏览:115
python干什么 发布:2024-12-17 18:27:06 浏览:578
广义表c语言 发布:2024-12-17 18:17:56 浏览:917
如何删除网站保存登录密码 发布:2024-12-17 17:53:07 浏览:282
电报不缓存 发布:2024-12-17 17:51:40 浏览:921
隔离用户ftp启动不了 发布:2024-12-17 17:40:06 浏览:64
内存与存储的区别 发布:2024-12-17 17:34:44 浏览:79
三星解压软件 发布:2024-12-17 17:31:54 浏览:689
电脑编程软件培训 发布:2024-12-17 17:31:47 浏览:660
androidbutton使用 发布:2024-12-17 17:31:45 浏览:642