问题描述:

is it possible to preview image before upload inside a draggable with knockout? I have some of the code but I cannot get it to work. I can type text and insert them inside a container but when I try to preview an image I cannot view the image alone I have to type a text before I can preview image. I would like to be able to preview as many images as possible at any given type without having to type any text before hand. if you need further explanation please feel free to ask thank you for your time.

this is html to upload text and image

<p align="center"><textarea data-bind="value: textContent" Placeholder="Type text to append" rows="4" cols="21"></textarea>&nbsp;&nbsp;&nbsp;

<button data-bind="click: addNew">Create</button></p>

<p align="center"><input type="file" id="files" name="file" multiple />

this is my html that displays the text and image

 <div id="box" class="container">

<div data-bind="foreach:items" class="fix_backround">

<div href="#" class="item" data-bind="draggable:true,droppable:true">

<b><font face="Arial Black" color="red"><span data-bind="click:$parent.remove" style="font-size:12pt;">X</span></font></b><br/><br/>

<center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>

this is where the image is shown

<output id="list"></output>

this is my image script

 function handleFileSelect(evt) {

var files = evt.target.files;

// Loop through the FileList and render image files as thumbnails.

for (var i = 0, f; f = files[i]; i++) {

// Only process image files.

if (!f.type.match('image.*')) {

continue;

}

var reader = new FileReader();

// Closure to capture the file information.

reader.onload = (function(theFile) {

return function(e) {

// Render thumbnail.

var span = document.createElement('span');

span.innerHTML =

[

'<img style="height: 150px; border: 1px solid #000; margin: 5px" src="',

e.target.result,

'" title="', escape(theFile.name),

'"/>'

].join('');

document.getElementById('list').insertBefore(span, null);

};

})(f);

// Read in the image file as a data URL.

reader.readAsDataURL(f);

}

}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

this is my draggable script

 var z = 1; //value to make div overlappable

$('#addText').click(function (e) {

/** Make div draggable **/

$('<div />', {

class: 'ui-widget-content',

appendTo: '.container',

draggable: {

containment: 'parent',

start: function( event, ui ) {

$(this).css('z-index', ++z);

}

}

});

});

$(document).on("dblclick", '.text', function()

{

$(this).hide(); $(this).closest('.item').find('.edit_text').val ($(this).text()).show();

});

$(document).on("click", ".edit_text", function()

{

return false;

});

$(document).on("click", function()

{

var editingText = $('.edit_text:visible');

if (editingText.length)

{

editingText.hide();

editingText.closest('.item').find('.text').text($(editingText).val()).show();

}

});

var count = 1;

var selectedDraggable;

ko.bindingHandlers.draggable={

init: function(element, valueAccessor, allBindingsAccessor, viewModel) {

$(element).draggable();

$(element).addClass('item' + count);

count++;

$(element).on('click', function () {

selectedDraggable = $(this);

})

}

};

var vm=function(){

var self=this;

self.items=ko.observableArray();

self.textContent = ko.observable('');

self.init=function(){

self.items([]);

}

self.remove=function(item){

console.log(item);

self.items.remove(item);

}

self.addNew = function() {

self.items.push( self.textContent() );

self.textContent('');

}

self.init();

}

ko.applyBindings(new vm());

相关阅读:
Top