form 表单无刷新上传图片

<div class="upload-container">
      <input type="file" name="fileToUpload" id="fileToUpload" class="fileupload" />
</div>

.upload-container {
            background-image: url(../../images/rv/add.jpg);
            background-repeat: no-repeat;
            width: 180px;
            height: 200px;
            padding-bottom: 10px;
            display: inline-block;
            vertical-align: middle;
            .fileupload {
                opacity: 0;
                filter: alpha(opacity=0);
                width: 200px;
                height: 200px;
            }
        }

$('.fileupload').change(function(event) {
        /* Act on the event */
        if ($('.fileupload').val().length) {
            var fileName = $('.fileupload').val();
            var extension = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();
            if (extension == ".jpg" || extension == ".png") {
                    var data = new FormData();
                    data.append('upload', $('#fileToUpload')[0].files[0]);
                    $.ajax({
                        url: 'apply/upload',
                        type: 'POST',
                        data: data,
                        cache: false,
                        contentType: false, //不可缺参数
                        processData: false, //不可缺参数
                        success: function(data) {
                            console.log(data);
                        },
                        error: function() {
                            console.log('error');
                        }
                    });
            } 
        }
    });


http://www.tuicool.com/articles/Z7rIzmJ