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+")");
        }
    }
 });
 });

这是我的小提琴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>

Jquery照片上传只接受jpeg无法正常工作

1 个答案:

Updated JS Fiddle