Question

我正在使用名为pithyupload的ajax数据/图像上传脚本，它适用于所有浏览器上的ajax图像和数据上传，因为它具有iframe回退功能。如果用户决定不上传和图像，只想文本数据，我想工作。但是，除非用户检测到并且图像已上传，否则脚本不会触发。

下面我已经包含了以下代码，有哪些想法可以解决这个问题？

Ajax表单提交

    $(document).ready(function (e){
$('#newdata').on('submit', function(e) { e.preventDefault();

//all form data values here//

$(function() {
$('#pithyUpload').pithyUpload({
    url: 'addData.php',
    dataType: 'text', 
    extData: { fullname: fullname, position: position, email: email, selecteddepartments: selecteddepartments, 
     isadmin: isadmin, agentbio: agentbio, editid: editid, type: type, companyid: company, chatlimit: chatlimit
              },
     onUploadSuccess: function(file, data, status, xhr) {


            },
    onFileTypeError: function(file) { }
 })  }); });  });

pithyupload jsfile

; (function ($) {
$.fn.pithyUpload = function (opts) {
    var $self = this;
    //default settings
    opts = $.extend({
        //properties
        url: document.URL,
        method: 'POST',
        extData: {},//extra data
        maxFileSize: null,
        maxFiles: null,
        allowedTypes: null,//null or array(eg. ['jpg', 'doc'])
        dataType: 'json',//ajax dataType
        fileName: 'pithyUpload',
        trigger: null,//null or 'change'
        //callbacks - if IE, only onNewFile, onComplete
        onNewFile: function () { },
        onComplete: function () { },
        onUploadProgress: function () { },
        onUploadSuccess: function () { },
        onUploadError: function () { },
        onFileTypeError: function () { },
        onFileSizeError: function () { },
        onFilesMaxError: function () { }
    }, opts || {});
    var typeReg = null;
    if (opts.allowedTypes)
        typeReg = RegExp("\.(" + opts.allowedTypes.join("|") + ")$", "i");

    //upload every single file
    function upload_file() {
        if (this._pos >= this.files.length) {
            this._pos = 0;
            opts.onComplete.call(this);
            return;
        }

        //check file type an file size
        var typeTest = true,
            sizeTest = true;

        //check file type
        if (typeReg)
            if (!typeReg.test(this.files[this._pos].name)) {
                opts.onFileTypeError.call(this, this.files[this._pos]);
                this._pos++;
                typeTest = false;
                upload_file.call(this);
            }

        //check file size
        if (opts.maxFileSize)
            if (opts.maxFileSize < this.files[this._pos].size) {
                opts.onFileSizeError.call(this, this.files[this._pos]);
                this._pos++;
                sizeTest = false;
                upload_file.call(this);
            }

        //ajax submit
        if (typeTest && sizeTest) {
            var self = this,
                $self = $(this),
                file = self.files[self._pos],
                fd = new FormData();
            opts.onNewFile.call(self, file, opts);
            for (var key in opts.extData)
                fd.append(key, opts.extData[key]);
            fd.append(opts.fileName, file);

            $.ajax({
                url: opts.url,
                type: opts.method,
                dataType: opts.dataType,
                data: fd,
                cache: false,
                contentType: false,
                processData: false,
                forceSync: false,
                xhr: function () {
                    var xhrobj = $.ajaxSettings.xhr();
                    if (xhrobj.upload) {
                        xhrobj.upload.addEventListener('progress', function (event) {
                            var percent = 0;
                            var position = event.loaded || event.position;
                            var total = event.total || event.totalSize;
                            if (event.lengthComputable) {
                                percent = Math.ceil(position / total * 100);
                            }
                            opts.onUploadProgress.call(self, file, percent);
                        }, false);
                    }
                    return xhrobj;
                },
                success: function (data, textStatus, xhr) {
                    opts.onUploadSuccess.call(self, file, data, textStatus, xhr);
                },
                error: function (xhr, textStatus, errorThrown) {
                    opts.onUploadError.call(self, file, xhr, textStatus, errorThrown);
                },
                complete: function (xhr, textStatus) {
                    self._pos++;
                    upload_file.call(self);
                }
            });
        }
    }

    function upload_files() {
        var self = this,
            $self = $(this);
        if (typeof FormData == 'undefined') {//IE
            var $iframe = $('<iframe style="position:absolute;top:-9999px;"/>')
                .attr('name', 'pithyUploadIframe'),
                $form = $('<form style="display:none;" method="post" enctype="multipart/form-data"></form>')
                    .attr('name', 'pithyUploadForm')
                    .attr("target", 'pithyUploadIframe')
                    .attr('action', opts.url),
                $input = $('<input type="file"/>').attr('name', opts.fileName),
                $hidden = $('<input type="hidden"/>');
            $iframe._upload_read = false;
            $('body').append($iframe).append($form.append($input));
            for (var key in opts.extData)
                $form.append(
                    $hidden.clone()
                        .attr('name', key)
                        .val(opts.extData[key])
                );
            $input.change(function () {
                opts.onNewFile.call(self, this.value);
                $form.submit();
                $iframe._upload_read = true;
            });
            $iframe.load(function () {
                if(!$iframe._upload_read)
                    return;
                var contents = $(this).contents().get(0);
                console.log(contents);
                var data = $(contents).find('body').text();
                if ('json' == opts.dataType) {
                    data = window.eval('(' + data + ')');
                }
                opts.onComplete(data);
                $iframe.remove();
                $form.remove();
            });
            $input.click();
        } else {
            if (opts.maxFiles)
                if (opts.maxFiles < this.files.length) {
                    opts.onFilesMaxError.call(this, this.files);
                    return;
                }
            self._pos = 0;
            upload_file.call(self);
        }
    };

    if (opts.trigger) {
        if (typeof FormData == 'undefined') {//IE
            return $self.click(function () {
                upload_files.call(this);
                return false;
            });
        }
        return $self.change(function () {
            upload_files.call(this);
        });
    } else {
        upload_files.call($self.get(0));
        return $self;
    }
  };
})(jQuery);

Answer 1

简短回答，在发送数据/发送精简函数之前执行一些验证。

var myImageFile = document.getElementById("imageFile");
if( myImageFile.files.length == 0 ){
    console.log("no image file selected");
}

Ajax图像上传和数据相同表单提交即使没有选择图像（Pithyupload）

1 个答案: