ajax图片上传mysql,图片上传插件，基于jquery的上传插件，ajax图片上传，再更新...

由于在项目中使用遇到了一些情况，之前的方法无法满足这些需求，于是重新修改了一下。遇到什么新的需求呢？项目做的是一个视频网站，想在上传视频后点击某个按钮自动生成视频的缩略图，如果不想自动生成(自动生成会有点模糊)，则可以自己上传图片。大概的界面如下：

要想实现这样的功能，必须得把upload中的一些方法暴露出来这样就可以在外部中使用了。更新后的写法。

[javascript]

(function ($) {

$.extend($.fn, {

upload: function (options) {

options = $.extend(options, {

fileType: "gif|jpg|jpeg|png|bmp",

url: "/user/upload.aspx",

params: "",

width: "100",

height: ""

});

var methods = new uploader(options.url, options.params, null, options.width, options.height);

//上传主函数

this.each(function () {

var $this = $(this);

var wrap = $this.parent();

//初始化上传控件

var uploador = new uploader(options.url, options.params, wrap, options.width, options.height);

uploador.onload();

$this.bind("click", function () {

var inputfile = wrap.find("input:file");

var fileBox = inputfile.parent();

if (inputfile.val() === "") {

alert("请选择要上传的图片！");

return false;

}

//验证图片

if (!uploador.checkFile(inputfile.val(), options.fileType)) {

alert("文件格式不正确，只能上传格式为：" + options.fileType + "的文件。");

return false;

}

//创建表单

var form = uploador.createForm();

//把上传控件附加到表单

inputfile.appendTo(form);

                    fileBox.html("   正在上传...  "); 

$this.attr("disabled", true);

try {

//开始ajax提交表单

form.ajaxSubmit({ type: "POST",

success: function (data) {

data = eval("(" + data + ")");

if (data.result !== "1") {

alert(data.msg);

} else {

uploador.delToShow(data.imgurl);

}

$this.attr("disabled", false);

fileBox.html("");

form.remove();

}

});

} catch (e) {

alert(e.message);

}

});

});

return methods; //返回methods方便从外部调用

}

});

///

/// 初始化上传控件 url=上传路径，不加参数 params=参数如name=jaryway&pass=123

///

/// 上传路径

/// 上传的参数 eg:"userid=1&username=xiaoming"

/// 上传体(整个上传体)

/// 显示图的宽,为空则表示自动(给定高度则宽度自动)或默认 eg:"100"

/// 显示图的高,为空则表示自动(给定宽度则高度自动)或默认 eg:"100"

var uploader = function (url, params, wrap, width, height) {

$.extend(uploader, {

methods: {

//检查文件后缀 val1=上传的文件名称，val2=允许的文件类型，如：gif|jpg|jpeg|png|bmp

checkFile: function (val1, val2) {

//获得文件后缀

val1 = val1.substring(val1.lastIndexOf("."), val1.length)

val1 = val1.toLowerCase();

if (typeof val2 !== 'string' || val2 === "") { val2 = "gif|jpg|jpeg|png|bmp"; }

return new RegExp("\.(" + val2 + ")$").test(val1);

},

//创建上传表单

createForm: function () {

var uploadform = document.createElement("form");

uploadform.action = url + "?oper=upload" + params + "&r=" + Math.random();

uploadform.method = "post";

uploadform.enctype = "multipart/form-data";

uploadform.style.display = "none";

//将表单加当document上，

//创建表单后一定要加上这句否则得到的form不能上传。document后要加上body,否则火狐下不行。

document.body.appendChild(uploadform);

return $(uploadform);

},

//创建图片

createImage: function () {

//不能用 new Image() 来创建图片，否则ie下不能改变img 的宽高

var image = $(document.createElement("img"));

image.attr({ "title": "双击图片可删除图片！" });

if (width !== "")

image.attr({ "width": width });

if (height !== "")

image.attr({ "height": height });

return image;

},

//显示图片

showImage: function (imgurl, wrap1) {

var image = this.createImage();

wrap = typeof wrap1 === "object" ? wrap1 : wrap;

var hiddenfile = wrap.find("input:hidden");

hiddenfile.val(imgurl);

wrap.find(".imgdiv").html("");

var a = $("查看");

a.attr("href", imgurl);

//要先append再给img赋值，否则在ie下不能缩小宽度。

image.appendTo(wrap.find(".imgdiv"));

image.attr("src", imgurl);

a.appendTo(wrap.find(".imgdiv"));

this.bindDelete(wrap);

},

//删除原图(如果原图存在)后显示

delToShow: function (imgurl, wrap1) {

wrap = typeof wrap1 === "object" ? wrap1 : wrap;

var hiddenfile = wrap.find("input:hidden");

//上传成功后，再删除图片，以免图片丢失

//若隐藏域中有图片，先删除图片

if (hiddenfile.val() !== "") {

this.delImage(imgurl, false, wrap);

}

else {

this.showImage(imgurl, wrap);

}

},

//绑定双击删除事件

bindDelete: function (wrap1) {

var $this = this;

wrap = typeof wrap1 === "object" ? wrap1 : wrap;

wrap.find(".imgdiv").find("img").bind("dblclick", function () {

$this.delImage("",true, wrap);

});

},

//删除图片,如果imgurl不为空则显示新图片

//isShowBox表示是否弹出提示信息

//如果imgurl不等于空字符串则在删除图片后显示新图片

delImage: function (imgurl, isShowBox, wrap1) {

$this = this;

wrap = typeof wrap1 === "object" ? wrap1 : wrap;

var hiddenfile = wrap.find("input:hidden");

if (typeof hiddenfile !== "undefined" && hiddenfile.val() !== "") {

var data = { oper: "delete", imgurl: hiddenfile.val(), r: Math.random() };

$.getJSON(url, data, function (data) {

if (isShowBox) { alert(data.msg) }

if (data.result === "1") {

hiddenfile.val("");

wrap.find(".imgdiv").html("");

}

if (imgurl !== "") {

$this.showImage(imgurl, wrap);

}

});

}

},

onload: function (wrap1) {

wrap = typeof wrap1 === "object" ? wrap1 : wrap;

var hiddeninput = wrap.find("input:hidden");

if (typeof hiddeninput !== "undefined" && hiddeninput.val() !== "") {

this.showImage(hiddeninput.val())

}

}

}

});

return uploader.methods;

}

})(jQuery);

调用：

[html]

var uploador;

$(document).ready(function () {

uploador = $("input.upload").upload();

//自动生成图片

$("#genImage").click(function () {

if ($("#txtFilePath").val() == "") {

alert("请先上传视频文件");

return false;

}

Lvegu.Loading.show("正在生成视频缩略图，请等待...");

$.ajax({

type: "get",

dataType: "json",

data: "file=" + $("#txtFilePath").val(),

url: "courseware_ajax.aspx?oper=ajaxGenImage&vsttm=" + (new Date().getTime()),

error: function (XmlHttpRequest, textStatus, errorThrown) { Lvegu.Loading.hide(); alert(XmlHttpRequest.responseText); },

success: function (d) {

Lvegu.Loading.hide();

switch (d.result) {

case '-1':

case '0':

alert(d.msg);

break;

case '1':

uploador.delToShow(d.imgurl, $("#upimg"));

break;

}

}

});

});

});

function delFile(filepath) {

var r = Math.random();

$.getJSON("courseware_ajax.aspx?oper=ajaxDeleteFile&r=" + r + "&file=" + filepath, function (d) {

return d.result === "1";

});

}

html代码：

[html]

资源路径

........

ssss

上传课件...................  www.2cto.com缩略图

暂时先整了到这里，过段时间在写个详细的和大家分享。