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

转载于:https://www.cnblogs.com/zj19940919/p/6373776.html