Question

我一直在尝试将以下两个脚本合并为一个，而选择上传的文件的文件类型和文件大小正确;

脚本一：

HTML

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

JQuery的

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$("#imgInp").change(function(){
    readURL(this);
});

JSFiddle http://jsfiddle.net/LvsYc/

脚本二：

function (e, data) {
    var goUpload = true;
    var uploadFile = data.files[0];
    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(uploadFile.name)) {
        common.notifyError('You must select an image file only');
        goUpload = false;
    }
    if (uploadFile.size > 2000000) { // 2mb
        common.notifyError('Please upload a smaller image, max size is 2 MB');
        goUpload = false;
    }
    if (goUpload == true) {
        data.submit();
    }
},

Answer 1

试试这个

FIDDLE

function readURL(input) {
  if (input.files && input.files[0]) {
    var goUpload = true;
    var uploadFile = input.files[0];
    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(uploadFile.name)) {
      common.notifyError('You must select an image file only');
      goUpload = false;
    }
    if (uploadFile.size > 2000000) { // 2mb
      common.notifyError('Please upload a smaller image, max size is 2 MB');
      goUpload = false;
    }
    if (goUpload) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('#blah').attr('src', e.target.result);
        setTimeout(function() {
          input.form.submit();
        },5000); // give them time to see the image
      }
      reader.readAsDataURL(uploadFile);
    }
  }
}

$("#imgInp").change(function(){
  readURL(this);
});

<强>更新

FIDDLE

var wrapper = $('<div/>').css({
    height: 0,
    width: 0,
    'overflow': 'hidden'
});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function () {
    readURL(this);
})

$('#file').click(function () {
    fileInput.click();
}).show();

function readURL(input) {
    $('#blah').hide();
    if (input.files && input.files[0]) {
        var goUpload = true;
        var uploadFile = input.files[0];
        if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(uploadFile.name)) {
            $('#file').text('You must select an image file only');
            setTimeout(function () {
                $('#file').text('Choose file');
            }, 2000);
            goUpload = false;
        }
        if (uploadFile.size > 2000000) { // 2mb
            common.notifyError('Please upload a smaller image, max size is 2 MB');
            goUpload = false;
        }
        if (goUpload) {
            $('#file').text("Uploading " + uploadFile.name);
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result).show();
                setTimeout(function () {
                    input.form.submit();
                }, 5000); // give them time to see the image
            }
            reader.readAsDataURL(uploadFile);
        }
    }
}

合并两个脚本 - 在预览之前检查图像和大小

1 个答案: