2017-07-16 09:54:12

License: MIT License

Fork: 0

Fav: 0

View: 223

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 62 lines
HTML 18 lines
CSS 10 lines

2017-07-11 1st

$(function() {
    var $fileList = $('#file_list');
    $fileList.on('click.deleteFile', '.delete_btn', function() {
        var $li = $(this).closest('.each_file');
        $li.remove();
        var $fileListLI = $('#file_list li input[name=img_file]');
        var inputFileNum = $fileListLI.length;
        var lastInputFile = $fileListLI.eq(-1);
        if (inputFileNum < 4)
        {
            $(lastInputFile).show();
        }
        return false;
    })
    $fileList.on('change.inputFile', '.input_file', function(e) {
        var $input = $(this),
            $li = $input.closest('.each_file'),
            $newLi = $li.clone();
            $fileList.append($newLi);
        var file = e.target.files[0],
            fileName = file.name;
        reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function() {
            var fileReader = this;
            if (fileReader.result)
            {
                var thumb = '<div class = "thumbnail"><img src = "' + fileReader.result + '" width = "150px" style = "max-width: 150px;">' + fileName + '<button class = "delete_btn">削除</button></div>';
                $li.append(thumb);
            }
            return this;
        };
        $input.hide();
        var $fileListLI = $('#file_list li input[name=img]');
        var inputFileNum = $fileListLI.length;
        var lastInputFile = $fileListLI.eq(-1);
        if (inputFileNum == 4)
        {
            $(lastInputFile).hide();
        }
        var fd = new FormData();
        var targetFile = $fileListLI.eq(-2);
        fd.append("file", $(targetFile).prop("files")[0]);
        $.ajax({
            url: 'http:///cgi-bin/test5.py',
            type: 'post',
            dataType: 'json',
            data: fd,
            processData: false,
            contentType: false
        }).done(function(res) {
            alert(res);
        }).fail(function(jqXHR, statusText, errorThrown) {
            alert(errorThrown);
        });
        return this;
    });
});

2017-07-11 1st

$(function() { var $fileList = $('#file_list'); $fileList.on('click.deleteFile', '.delete_btn', function() { var $li = $(this).closest('.each_file'); $li.remove(); var $fileListLI = $('#file_list li input[name=img_file]'); var inputFileNum = $fileListLI.length; var lastInputFile = $fileListLI.eq(-1); if (inputFileNum < 4) { $(lastInputFile).show(); } return false; }) $fileList.on('change.inputFile', '.input_file', function(e) { var $input = $(this), $li = $input.closest('.each_file'), $newLi = $li.clone(); $fileList.append($newLi); var file = e.target.files[0], fileName = file.name; reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function() { var fileReader = this; if (fileReader.result) { var thumb = '<div class = "thumbnail"><img src = "' + fileReader.result + '" width = "150px" style = "max-width: 150px;">' + fileName + '<button class = "delete_btn">削除</button></div>'; $li.append(thumb); } return this; }; $input.hide(); var $fileListLI = $('#file_list li input[name=img]'); var inputFileNum = $fileListLI.length; var lastInputFile = $fileListLI.eq(-1); if (inputFileNum == 4) { $(lastInputFile).hide(); } var fd = new FormData(); var targetFile = $fileListLI.eq(-2); fd.append("file", $(targetFile).prop("files")[0]); $.ajax({ url: 'http:///cgi-bin/test5.py', type: 'post', dataType: 'json', data: fd, processData: false, contentType: false }).done(function(res) { alert(res); }).fail(function(jqXHR, statusText, errorThrown) { alert(errorThrown); }); return this; }); }); <script src="js/jquery-1.12.4.min.js" charset="utf-8"></script> <style media="screen"> li{ list-style: none; } </style> <h1>Ajax sample</h1> <form action="upload.php" method="post" enctype="multipart/form-data"> <ul id="file_list"> <li class="each_file"> <input type="file" name="img" value="" accept="image/*"> </li> </ul> <input type="submit" id="submit_btn" value="画像アップロード"> </form> * { margin: 0; padding: 0; border: 0; } body { background: #dfd; font: 30px sans-serif; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

ohisama1

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/mhII/js"></script>

QR Code

Discussion

Questions on this code?

2017-07-11 1st

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags