로컬 그림 미리 보기 및 업로드

로컬에서 그림을 선택하고 그림의 순서를 좌우로 조정할 수 있습니다.
주요 단계:
1, 숨겨진 input[type='file']로 그림을 저장합니다.
2, 선택한 그림에 의 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']