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">&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页面以后显示的效果是：

㈣ 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标签要写好完整的图片地址。