javascript - Jquery 照片上传仅接受 jpeg 不起作用

Question

目前正在研究 jQuery 照片上传。第一个用户只需上传 jpeg 图像。如果他上传 jpeg 格式以外的任何图像，标签消息中应显示“请仅上传 jpeg”。其次，当图像上传时，无论大小如何，它都必须适合容器。第三，当用户上传图像时，我可以将此图像上传到我的数据库(MYSQL)

$("#imageUploadForm").css("background-image", "none");
$("#btn_del").css("display", "none");

这是我的 jQuery 代码

    $(function () {
     $("#btn_del").hide();
      $(".upload").on("change", function()
         {
        var files = !!this.files ? this.files : [];
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg)$/;
           if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

    if (/^image/.test( files[0].type)){ // only image file
        var reader = new FileReader(); // instance of the FileReader
        reader.readAsDataURL(files[0]); // read the local file

        $("#btn_del").show();

         $("#btn_del").on("click", function()
         {
            $("#imageUploadForm").css("background-image", "none");
             $("#btn_del").css("display", "none");
         });

        reader.onload = function(){ // set image data as background of div
            $("#imageUploadForm").css("background-image", "url("+this.result+")");
        }
    }
 });
 });

这是我的 fiddle Link

Answer 1

#1 您有一个 regex 表达式，但您没有使用它。

替换 if (/^image/.test( files[0].type)){

与 if (regex.test( files[0].type)){

#2 然后，要显示错误消息，您可以添加 else 并将其放在那里:

$('#error').text('Please upload only jpeg');

当用户选择 JPEG 文件时，不要忘记清空它:

$('#error').text('');

#3 要确保图像适合您的容器，您可以使用:

#imageUploadForm {
    background-size: contain; /* Handy CSS3 property */
    background-repeat: no-repeat;
    background-position: center;
}

Updated JS Fiddle

或者尝试下面的演示(相同的代码)

$(function() {
  
  $("#btn_del").hide();
  $(".upload").on("change", function() {
    var files = !!this.files ? this.files : [];
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg)$/;
    if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

    if (regex.test(files[0].type)) { // only image file
      var reader = new FileReader(); // instance of the FileReader
      reader.readAsDataURL(files[0]); // read the local file

      $("#btn_del").show();

      $("#btn_del").on("click", function() {
        $("#imageUploadForm").css("background-image", "none");
        $("#btn_del").css("display", "none");
      });

      reader.onload = function() { // set image data as background of div
        $("#imageUploadForm").css("background-image", "url(" + this.result + ")");
        $('#error').text(''); // Empty the error message
      }
    } else {
      $('#error').text('Please upload only jpeg'); // Add an error message
    }
  });

});

#error{
    color:red;
}
.choose_file{
    position:relative;
    display:inline-block;    
    border:#ebebeb solid 1px;
    width:150px;
    height:150px;
    padding: 4px 6px 4px 8px;
    font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif;
    color: #7f7f7f;
    margin-top: 2px;
	background:#f2f2f2;
}
.btn_del{
    width:80px;
    height:30px;
    background-color:darkGrey !important;
    border:none;
}
 input.upload {
        right:0;
        margin:0;
        bottom:0;
        padding:0;
        opacity:0;
        height:300px;
        outline:none;
        cursor:inherit;
        position:absolute;
        font-size:10px;
 }


#imageUploadForm
{
    background-size: contain; /* Handy CSS3 property */
    background-repeat: no-repeat;
    background-position: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="choose_file" id="imageUploadForm">
  <span>Photo</span>
  <input name="Select File" class="upload" type="file" />
  <label id="error"></label>
</div>
<button id="btn_del" class="btn_del">Delete</button>