上传图片不只是在android原生浏览器上工作

Question

我一直对上传图像的代码有问题。它不能在原生android浏览器上工作(在galaxy 2上试过)。它可以在不同机器上的所有其他浏览器上正常工作。如果有人以前遇到过这个问题，或者知道出了什么问题，请提供帮助。

下面是模板-> image_upload_view.hbs

<label>
<div class='label-text'>{{t label }}:</div>
<div class="input-prepend">
<div class="preview" style="background-image: url('{{src}}');"></div>
<i class="icon-arrow-up"></i>
<span class="input-description">{{t description}}</span>
<span class="change-notification hide">{{t 'COMPONENT_IMAGE_UPLOAD_IMAGE_CHANGED'}}</span>
<i class="icons"></i>
<input class="input hide" type="file" name="image_file_name" accept="image/gif, image/jpeg, image/jpg, image/png"></input>
</div>
</label>

这是逻辑-> image_upload_view.js

var Base = require( '../../base' ),
_ = require( 'underscore' ),
oldBrowserPreviewImage = '/images/profiles/edit/default_cover_image_preview.jpg';

module.exports = Base.extend( {

className: 'component-image-upload',

events: {
    'change input[type=file]': 'onChange',
    'click .remove-image': 'onRemove'
},

getTemplateData: function () {
    return _( this._super() ).extend( {
        description: this.description,
        label: this.label,
        src: this.src
    } );
},

postRender: function () {
    // TODO: Let parent instantiate and pass in models once new hydration logic is merged.
    var ModelType = require( '../../../models/image_upload/' + this.type );

    this._super();

    this.model = new ModelType( {
        file_url: this.src
    }, {
        app: this.app
    } );

    this.renderImagePreview();
},

onChange: function ( evt ) {
    this.updateFile( this.$( evt.currentTarget ) );
},

onRemove: function ( evt ) {
    var fileInput = this.$( 'input[type=file]' );

    // Prevent remove click from also triggering input's file selection.
    this.disableEvent( evt );

    // Quirky, but correct way to clear the file input.
    // http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery#answer-13351234
    fileInput.wrap( '<form>' ).closest( 'form' ).get( 0 ).reset();
    fileInput.unwrap();

    this.updateFile( fileInput );
},

updateFile: function ( fileInput ) {
    this.model.setFile( fileInput );
    this.renderImagePreview();

    // TODO: Need to let parent know which model type this is until the parent
    // can instantiate the model itself (pending hydration).
    this.$el.trigger( 'imageUploadComponent:changed', [ this.model, this.type ] );
},

renderImagePreview: function () {
    var self = this;

    this.model.getFileUrl().done( function ( url ) {
        var backgroundImage,
            hasFile = self.model.hasFile(),
            // If we have a file set but got a null URL back, it means we're using an old browser
            // that doesn't support generating local file URLs via the FileReader API.
            isOldBrowser = hasFile && url === null;

        if ( url ) {
            backgroundImage = 'url(\'' + url + '\')';
        } else if ( isOldBrowser ) {
            // For old browsers, show a generic preview image.
            backgroundImage = 'url(\'' + oldBrowserPreviewImage + '\')';
        } else {
            backgroundImage = 'none';
        }

        self.$( '.preview' ).css( 'background-image', backgroundImage );

        // If we can't show a preview of the selected image (old browsers), display a change notification message
        // to let the user know that the selection "took".
        self.$( '.change-notification' ).toggleClass( 'hide', !( hasFile && isOldBrowser ) );

        self.toggleActionIcon( !url );
    } );
},

toggleActionIcon: function ( toggle ) {
    var input = this.$( '.icons' );

    input.toggleClass( 'icon-add', toggle );
    input.toggleClass( 'remove-image icon-close', !toggle );
}

} );

module.exports.id = 'shared/components/image_upload_view';

Answer 1

如果您使用<file accept="image/*"/>，它也应该在较旧的(安卓)浏览器版本上工作。

只有在较新的浏览器中才支持<file accept="image/jpeg"/>。

我不知道它支持哪个Chrome版本(chrome:// version )，但是：

• Chrome v18:不支持它。
• Chrome v38:支持它。