为什么Jquery图片上传器无法上传图片

时间:2016-03-23 16:15:37

标签: php jquery ajax image-uploading

此代码取自AJAX Image upload using PHP我已将代码复制到这些文件:index.html,style.css,script.js,ajax_php_file.php并下载NoImage.jpg。然后我从我的电脑中选择了图像,并且照片已在客户端更改为所选图像。然后我点击上传,没有文件上传到调用php脚本的文件夹。在Firefox 32 Firebug控制台中测试,未报告任何错误。我也用Jquery 2.2.2尝试过这个,但是告诉我e.preventDefault();被诽谤。因此,你能告诉我代码有什么问题吗?它也不会在Opera上传。我看到有更多的人在脚本的原始页面上询问这个问题,但答案仍未得到回应。

我尝试在$("#uploadimage").submit();之后添加此代码reader.readAsDataURL(this.files[0]);,但这也无济于事。

然而这里的实例: http://kod.djpw.cz/vpvb

然而是来自控制台的代码。如果我编辑这个功能:

  function imageIsLoaded(e) {
    $("#file").css("color","green");
    console.log($("#file"));
    $('#image_preview').css("display", "block");
    console.log($('#image_preview'));
    $('#previewing').attr('src', e.target.result);
    console.log($('#previewing'));
    $('#previewing').attr('width', '250px');
    $('#previewing').attr('height', '230px');
  };

我明白这一点:

Object { 0: <input#file>, length: 1, context: HTMLDocument → index.html, selector: "#file" } script.js:45
Object { 0: <div#image_preview>, length: 1, context: HTMLDocument → index.html, selector: "#image_preview" } script.js:47
Object { 0: <img#previewing>, length: 1, context: HTMLDocument → index.html, selector: "#previewing" } script.js:49

1 个答案:

答案 0 :(得分:0)

我被解决了JS而没有意识到必须通过ajax_php_file.php在服务器端修复上传。当我挖掘代码时,我看到了行

if (file_exists("upload/" . $_FILES["file"]["name"])) {
  echo $_FILES["file"]["name"] . " <span id='invalid'><b>already exists.</b></span> ";

所以这意味着我需要在与php脚本位置相同的文件夹中创建“upload”文件夹。这是一个简单的修复,但它不在原始代码描述中。