Problem with image preview in < IE10

[suhaotian]

the plain file input in IE can get text (select a image, see console output):

http://jsbin.com/xopatijojo/edit?html,js,output

But, I use the Simple-Ajax-Uploader to select image, code like this:

      var s_uploader = new ss.SimpleUpload({   
        button: id_s,
        url: urls.upload,
        name: 'default-one',
        multiple: false,
        multipart: true,  
        maxUploads: 1,    
        maxSize: 10240, 
        allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
        accept: 'image/*',
        responseType: 'html',
        autoSubmit: false,
        onChange: function (filename, extension, uploadBtn, fileSize, file) {
            previewImage(s_uploader._input, $('#select-img'))
        },
        onProgress: function(n){
        },
        onSubmit: function(filename, ext) {
          var self = this;
          self.setData({
              name: 'default-one',
              hash: 'custom_hash',
              reType: 'html'
          })
        },
        onSizeError: function () {

        },
        onExtError: function() {
        },
        onComplete: function(file, response, btn, size) {
        },
        onError: function (filename, errorType, status, statusText, response, uploadBtn, fileSize) {
        }
      })
      function previewImage(image, $display) {
        if (typeof FileReader !== 'undefined') {
          var oFReader = new FileReader()
          if (image.files && image.files[0]) {
            oFReader.readAsDataURL(image.files[0]);
          } else {
            oFReader.readAsDataURL(image)
          }
          oFReader.onload = function (oFREvent) {
            $cropper.setImage(oFREvent.target.result)
          }
        } else { // IE10-
          image.focus()
          image.select()
          image.blur()
          console.log(image.value)
          var src = document.selection.createRange().text
          alert(src)  // null
          try {
            $cropper.setImage(src)
          } catch(e) {
            console.log(e)
          }
        }

* document.selection.createRange().text * get null string

but Demo at jsbin was right.

please tell me why

[suhaotian]

@LPology

[dsky1990]

you mean the base64 ?

[suhaotian]

@dsky1990 no, It's: '''js ... image.focus() image.select() image.blur() console.log(image.value) var src = document.selection.createRange().text alert(src) // null ... '''

plain input file can got image path in < IE10, Simple-Ajax-Uploader can't got the path. I guess the input is dynamic

[dsky1990]

@suhaotian yes, prior to ie 11, createRange existed on document.selection. this was non-standard. it has since been removed.

today, createRange exists strictly on the document. see: createRange

[LPology]

@suhaotian @dsky1990
I'm slightly confused, is this an issue with the plugin itself?

[LPology]

@suhaotian You should probably pass the file argument of the onChange() callback to previewImage():

        onChange: function (filename, extension, uploadBtn, fileSize, file) {
            previewImage(file, $('#select-img'))
        },

Not sure if this fixes your issue, but this is a definitely better approach. The file argument is the selected file and gets passed to onChange() as the fifth argument to allow direct access for things like this.

[suhaotian]

@LPology It does'nt work, I use another way to solve the problem :smile: , thank you

[LPology]

Okay, closing this one out then.