图片上传_ajax上传之改进版本

上篇回顾:自己写的图片上传_ajax上传(增强版)

此次改进:
1、加上了客户端格式验证。
2、将方法提出来了,不再使用id访问,只需根据上传按钮即可上传。
3、因为改成了不用id访问,所以解决了一个页面只能有一个上传的问题。

不多说,还是先来张效果图吧。

js部分的代码:

//上传主程序
function uploadfile(o) {
    //alert(o);
    //准备显示的图片(不能在这里创建,否者ie图片不能根据height按比例缩小)
    //var img = document.createElement("img");
    //img.title = "双击图片可删除图片";
    //img.height = "100";

    var self = $(o);
    if (!self) { return; }
    //self:上传按钮;    
    var parentDiv = self.parent(); //整个上传的容器    
    var imgDiv = parentDiv.find(".fileimgdiv").eq(0); //用于显示图片的div
    var imgupfile = parentDiv.find("input:file").eq(0); //上传控件
    var span = imgupfile.parent(); //上传按钮的父级。
    var ImageHideFile = parentDiv.find("input:hidden").eq(0); //图片隐藏域。
    if (imgupfile.val() == "") {
        alert("请选择要上传的图片!");
        return false;
    }
    else {
        if (!checkImgType(imgupfile.val())) {
            alert("格式不正确,只能上传格式为gif|jpeg|jpg|png|bmp!");
            return false;
        }
    }

    //如果已有图片,则先把图片删除
    if (ImageHideFile.val() != "") {
        var url = "/Public/Delete/" + "?id=" + ImageHideFile.val() + "&ra=" + Math.random();
        $.get(url, function (data) { ImageHideFile.val(""); imgDiv.find("img").eq(0).remove() });
    }
    //准备表当
    var myform = document.createElement("form");
    myform.action = "/Public/Upload";
    myform.method = "post";
    myform.enctype = "multipart/form-data";
    myform.style.display 
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值