本地图片的预览和上传
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了本地图片的预览和上传相关的知识,希望对你有一定的参考价值。
本地选择图片,并且可以左右调整图片的顺序。
主要步骤:
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‘]
以上是关于本地图片的预览和上传的主要内容,如果未能解决你的问题,请参考以下文章