博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
本地图片的预览和上传
阅读量:6209 次
发布时间:2019-06-21

本文共 6015 字,大约阅读时间需要 20 分钟。

本地选择图片,并且可以左右调整图片的顺序。

主要步骤:

1,用隐藏的input[type='file']来存图片。

2,把选择的图片,赋值个<img>的src属性。用到一个取对象url的方法。

// 图片对象的URL取得function getObjectURL(file) {    var url = null;    if (window.createObjectURL != undefined) {        url = window.createObjectURL(file)    } else if (window.URL != undefined) {        url = window.URL.createObjectURL(file)    } else if (window.webkitURL != undefined) {        url = window.webkitURL.createObjectURL(file)    }    return url};

3,左右箭头调整图片顺序的时候,src可以互相交换,但是 input[type='file']的value值不能交换(浏览器安全限制)。

替代做法是,交换除了value以外的input[type='file']的ID,name,class等值。

大致的代码放出来,做个参考

//(▸)按钮    //(◀)按钮    $("input[type='button'].arrowButton").click(function () {        var referClass_from = $(this).attr('referClass');        var prefix = referClass_from.substr(0, referClass_from.length - 1);        var no_from = referClass_from.substr(referClass_from.length - 1);        var no_to;        if ($(this).hasClass("left")) {            no_to = parseInt(no_from) - 1;        } else {            no_to = parseInt(no_from) + 1;        }        var referClass_to = prefix + no_to;        var $file_from = $("input[type='file']" + "." + referClass_from);        var $file_to = $("input[type='file']" + "." + referClass_to);        var file_id_from = $file_from.attr("id");        var file_name_from = $file_from.attr("name");        var file_class_from = $file_from.attr("class");        var file_referClass_from = $file_from.attr("referClass");        var title_from = $("input[type='text']" + "." + referClass_from + ".title").val();        var date_from = $("input[type='text']" + "." + referClass_from + ".date").val();        var imgsrc_from = $("img" + "." + referClass_from + ".img").attr("src");        var file_existed_from = $("#" + referClass_from + "_Existed").val();        var file_path_from = $("#" + referClass_from).val();        var file_id_to = $file_to.attr("id");        var file_name_to = $file_to.attr("name");        var file_class_to = $file_to.attr("class");        var file_referClass_to = $file_to.attr("referClass");        var title_to = $("input[type='text']" + "." + referClass_to + ".title").val();        var date_to = $("input[type='text']" + "." + referClass_to + ".date").val();        var imgsrc_to = $("img" + "." + referClass_to + ".img").attr("src");        var file_existed_to = $("#" + referClass_to + "_Existed").val();        var file_path_to = $("#" + referClass_to).val();        // To=>From        $file_from.attr("id", file_id_to);        $file_from.attr("name", file_name_to);        $file_from.attr("referClass", file_referClass_to);        $file_from.attr("class", file_class_to);        $("input[type='text']" + "." + referClass_from + ".title").val(title_to);        $("span" + "." + referClass_from + ".title").text(title_to);//印刷タブ        $("input[type='text']" + "." + referClass_from + ".date").val(date_to);        $("span" + "." + referClass_from + ".date").text(date_to);//印刷タブ        $("img" + "." + referClass_from + ".img").attr("src", imgsrc_to);//印刷タブと一緒        $("#" + referClass_from + "_Existed").val(file_existed_to);        $("#" + referClass_from).val(file_path_to);        // From=>To        $file_to.attr("id", file_id_from);        $file_to.attr("name", file_name_from);        $file_to.attr("class", file_class_from);        $file_to.attr("referClass", file_referClass_from);        $("input[type='text']" + "." + referClass_to + ".title").val(title_from);        $("span" + "." + referClass_to + ".title").text(title_from);//印刷タブ        $("input[type='text']" + "." + referClass_to + ".date").val(date_from);        $("span" + "." + referClass_to + ".date").text(date_from);//印刷タブ        $("img" + "." + referClass_to + ".img").attr("src", imgsrc_from);//印刷タブと一緒        $("#" + referClass_to + "_Existed").val(file_existed_from);        $("#" + referClass_to).val(file_path_from);    });// 图片选择变化function changePhoto(sender) {    var picFile = $(sender).val();    if (picFile) {        // 后缀名检查        if (!checkFileType(picFile, UPLOAD_IMAGE_FILE_EXTENSION)) {            alert(G_W0008_A);            $(sender).val('');            return;        }        // 文件大小检查        if (!checkFileSize($(sender)[0], UPLOAD_IMAGE_FILE_SIZE_MAX)) {            $(sender).val('');            alert(G_W0009_A);            return;        }        var picFileNmae = picFile.replace(/^.*[\\\/]/, '');        var picFileNameWithOutExt = picFileNmae.replace(/\..*/, '');        var maxlength = $("input[type='text']" + "." + $(sender).attr('referClass') + ".title").attr("maxlength");        if (maxlength) {            picFileNameWithOutExt = picFileNameWithOutExt.substr(0, maxlength);        }        // 图片title        $("input[type='text']" + "." + $(sender).attr('referClass') + ".title").val(picFileNameWithOutExt);        // 图片拍摄日期(Exif)        $(sender).fileExif(function (exifObj) {            if (exifObj.DateTime && exifObj.DateTime.length > 10) {                var strDate = exifObj.DateTime.substr(0, 10).replace(new RegExp(":", "g"), '/');                $("input[type='text']" + "." + $(sender).attr('referClass') + ".date").val(strDate);            } else {                $("input[type='text']" + "." + $(sender).attr('referClass') + ".date").val('');            }        });        // 图片预览        if ($(sender)[0].files) {            $("img" + "." + $(sender).attr('referClass') + ".img").attr("src", getObjectURL($(sender)[0].files[0]));        }    } else {        //cancel        return;    }};

4,获取图片的拍摄日期,用到一个jquery的插件jquery.exif.js

// (Exif情報取得)        $(sender).fileExif(function (exifObj) {            if (exifObj.DateTime && exifObj.DateTime.length > 10) {                var strDate = exifObj.DateTime.substr(0, 10).replace(new RegExp(":", "g"), '/');                $("input[type='text']" + "." + $(sender).attr('referClass') + ".date").val(strDate);            } else {                $("input[type='text']" + "." + $(sender).attr('referClass') + ".date").val('');            }        }); //sender 就是input[type='file']

  

  

转载地址:http://robja.baihongyu.com/

你可能感兴趣的文章
高可用高性能负载均衡软件HAproxy详解指南-第二章(配置文件、关键字、ACL)...
查看>>
去朱家尖游玩
查看>>
合并压缩JavaScript,开发发布两不误
查看>>
【Absible学习】ansible管理windows系统
查看>>
WCF简单教程(5) 用IIS做Host
查看>>
Cisco设备作为DHCP服务器的配置方法(下)
查看>>
Android帧缓冲区(Frame Buffer)硬件抽象层(HAL)模块Gralloc的实现原理分析(6)...
查看>>
被问到“你现在的薪水是多少时”,该如何回答?
查看>>
敏捷个人:下一个项目经理就是你(Agile tour 2011 青岛)
查看>>
敏友的【敏捷个人】有感(1): 敏捷个人-阅读笔记 by 人月神话
查看>>
Exchange Server 2013配置邮件流与外部访问
查看>>
yum的排错
查看>>
ORACLE 11GR2 RAC的网络规划解析
查看>>
rhel6 dhcp dns配置小贴士
查看>>
《统一沟通-微软-培训》-2-部署-反向代理-1-部署
查看>>
烂泥:下载酷我收费的MV
查看>>
一种NVMe SSD友好的数据存储系统设计
查看>>
IT168:2013年中国SOC安全管理平台应用状况调查报告
查看>>
linux运维实战练习-2016年1月19日-2月3日课程作业(练习)安排
查看>>
还不会用正则?看Linux 中 grep 命令的 12 个实践例子
查看>>