Question

如何在不刷新或重定向到新页面的情况下将图像上传到文件夹？我正在考虑使用来自http://www.w3schools.com/php/php_file_upload.asp的php5我想要做的是一个页面，用户可以上传他们自己的照片而不刷新页面或重定向我将拥有用户之前在同一页面上传的所有图像用户将能够从他们自己的任何图像中进行选择并将其插入可拖动的图像中。

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());

a:link {
  text-decoration: none;
}
/* unvisited link */

a:visited {
  text-decoration: none;
}
/* visited link */

a:hover {
  text-decoration: none;
}
/* mouse over link */

a:active {
  text-decoration: none;
}
/* selected link */

</style><style>.toolbar {
  background-color: lightgrey;
  width: 490px;
  height: 23px;
  border: none;
  position: none;
}
</style> <style>.item {
  width: 200px;
  height: 200px;
  padding: 0.5em;
  background: transparent;
  z-index: 1;
  display: block;
}
.edit_text {
  display: none;
}
.fix_backround {
  background-color: transparent;
}
.container {
  background-color: lightgrey;
  width: 500px;
  height: 500px;
  border: 2px solid;
  position: relative;
  overflow: auto;
}

<form action="upload.php" method="post" enctype="multipart/form-data">
  <p align="center">&nbsp;</p>
  <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" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
  </p>


  <center>
    <div class="container">
      <div data-bind="foreach:items" class="fix_backround">
        <div href="#" class="item" data-bind="draggable:true,droppable:true">
          <span data-bind="click:$parent.remove">[x]</span>
          <br/>
          <br/>
          <center><span class="text" data-bind="text:$data"></span>
            <input class="edit_text" />
          </center>
          <?php include( 'fig.php'); $query_image="SELECT * FROM empleo_work order by id desc limit 1" ; // This query will show you all images if you want to see only one image pass id='$id' e.g. "SELECT * FROM nametable id='$id'". $result=m ysql_query($query_image);
          if(mysql_num_rows($result)>0) { while($row = mysql_fetch_array($result)) { echo'
          <br>
          <br>
          <a href="upload1/'.$row[" images "].'">
            <img src="upload1/'.$row[" images "].'" style=w idth="165" height="104">
          </a>
          '; } } else { echo 'File name not found in database'; } ?></div>
      </div>
    </div>
  </center>

</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Answer 1

function previewFile(vid,iid) {

  var preview = document.querySelector('img');
  var preview = document.querySelector(vid);
  
  var file    = document.querySelector(iid).files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
    $(vid).show();
    
    /*** Write your code for image upload here***/
    
  } else {
    preview.src = "";
  }
}

<input type="file" name="img_file" id="img_file" onchange="previewFile('#img_upload','#img_file')"/>

<img src="../img/no-logo.gif" id="img_upload" alt="Image">

上传文件而不重定向或刷新

1 个答案: