blocks|key|113275|text|这是接收上传文件的php文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113276|<?
$data+=+array();
++++//check+with+your+logic
++++if+(isset($_FILES))+{
++++++++$error+=+false;
++++++++$files+=+array();

++++++++$uploaddir+=+$target_dir;
++++++++foreach+($_FILES+as+$file)+{
++++++++++++if+(move_uploaded_file($file['tmp_name'],+$uploaddir+.+basename(+$file['name'])))+{
++++++++++++++++$files[]+=+$uploaddir+.+$file['name'];
++++++++++++}+else+{
++++++++++++++++$error+=+true;
++++++++++++}
++++++++}
++++++++$data+=+($error)+?+array('error'+=>+'There+was+an+error+uploading+your+files')+:+array('files'+=>+$files);
++++}+else+{
++++++++$data+=+array('success'+=>+'NO+FILES+ARE+SENT','formData'+=>+$_REQUEST);
++++}

++++echo+json_encode($data);
?>|code-block|syntax|javascript|113277|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>and this is the php file to receive the uplaoded files</p>

<pre><code>&lt;?
$data = array();
    //check with your logic
    if (isset($_FILES)) {
        $error = false;
        $files = array();

        $uploaddir = $target_dir;
        foreach ($_FILES as $file) {
            if (move_uploaded_file($file['tmp_name'], $uploaddir . basename( $file['name']))) {
                $files[] = $uploaddir . $file['name'];
            } else {
                $error = true;
            }
        }
        $data = ($error) ? array('error' =&gt; 'There was an error uploading your files') : array('files' =&gt; $files);
    } else {
        $data = array('success' =&gt; 'NO FILES ARE SENT','formData' =&gt; $_REQUEST);
    }

    echo json_encode($data);
?&gt;
</code></pre>


blocks|key|113281|text|var+formData+=+new+FormData($("#YOUR_FORM_ID")[0]);
$.ajax({
++++url:+"upload.php",
++++type:+"POST",
++++data+:+formData,
++++processData:+false,
++++contentType:+false,
++++beforeSend:+function()+{

++++},
++++success:+function(data){




++++},
++++error:+function(xhr,+ajaxOptions,+thrownError)+{
+++++++console.log(thrownError+%2B+"\r\n"+%2B+xhr.statusText+%2B+"\r\n"+%2B+xhr.responseText);
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|113282|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var formData = new FormData($("#YOUR_FORM_ID")[0]);
$.ajax({
    url: "upload.php",
    type: "POST",
    data : formData,
    processData: false,
    contentType: false,
    beforeSend: function() {

    },
    success: function(data){




    },
    error: function(xhr, ajaxOptions, thrownError) {
       console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
});
</code></pre>


blocks|key|4619504|text|**1.+index.php**
<body>
++++<span+id="msg"+style="color:red"></span><br/>
++++<input+type="file"+id="photo"><br/>
++<script+type="text/javascript"+src="jquery-3.2.1.min.js"></script>
++<script+type="text/javascript">
++++$(document).ready(function(){
++++++$(document).on('change','#photo',function(){
++++++++var+property+=+document.getElementById('photo').files[0];
++++++++var+image_name+=+property.name;
++++++++var+image_extension+=+image_name.split('.').pop().toLowerCase();

++++++++if(jQuery.inArray(image_extension,['gif','jpg','jpeg',''])+==+-1){
++++++++++alert("Invalid+image+file");
++++++++}

++++++++var+form_data+=+new+FormData();
++++++++form_data.append("file",property);
++++++++$.ajax({
++++++++++url:'upload.php',
++++++++++method:'POST',
++++++++++data:form_data,
++++++++++contentType:false,
++++++++++cache:false,
++++++++++processData:false,
++++++++++beforeSend:function(){
++++++++++++$('#msg').html('Loading......');
++++++++++},
++++++++++success:function(data){
++++++++++++console.log(data);
++++++++++++$('#msg').html(data);
++++++++++}
++++++++});
++++++});
++++});
++</script>
</body>

**2.upload.php**
<?php
if($_FILES['file']['name']+!=+''){
++++$test+=+explode('.',+$_FILES['file']['name']);
++++$extension+=+end($test);++++
++++$name+=+rand(100,999).'.'.$extension;

++++$location+=+'uploads/'.$name;
++++move_uploaded_file($_FILES['file']['tmp_name'],+$location);

++++echo+'<img+src="'.$location.'"+height="100"+width="100"+/>';
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4619505|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>**1. index.php**
&lt;body&gt;
    &lt;span id="msg" style="color:red"&gt;&lt;/span&gt;&lt;br/&gt;
    &lt;input type="file" id="photo"&gt;&lt;br/&gt;
  &lt;script type="text/javascript" src="jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    $(document).ready(function(){
      $(document).on('change','#photo',function(){
        var property = document.getElementById('photo').files[0];
        var image_name = property.name;
        var image_extension = image_name.split('.').pop().toLowerCase();

        if(jQuery.inArray(image_extension,['gif','jpg','jpeg','']) == -1){
          alert("Invalid image file");
        }

        var form_data = new FormData();
        form_data.append("file",property);
        $.ajax({
          url:'upload.php',
          method:'POST',
          data:form_data,
          contentType:false,
          cache:false,
          processData:false,
          beforeSend:function(){
            $('#msg').html('Loading......');
          },
          success:function(data){
            console.log(data);
            $('#msg').html(data);
          }
        });
      });
    });
  &lt;/script&gt;
&lt;/body&gt;

**2.upload.php**
&lt;?php
if($_FILES['file']['name'] != ''){
    $test = explode('.', $_FILES['file']['name']);
    $extension = end($test);    
    $name = rand(100,999).'.'.$extension;

    $location = 'uploads/'.$name;
    move_uploaded_file($_FILES['file']['tmp_name'], $location);

    echo '&lt;img src="'.$location.'" height="100" width="100" /&gt;';
}
</code></pre>


blocks|key|113322|text|使用纯js|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113323|​|113324|async+function+saveFile()+
{
++++let+formData+=+new+FormData();+++++++++++
++++formData.append("file",+sortpicture.files[0]);
++++await+fetch('/uploads',+{method:+"POST",+body:+formData});++++
++++alert('works');
}|code-block|syntax|javascript|113325|<input+id="sortpicture"+type="file"+name="sortpic"+/>
<button+id="upload"+onclick="saveFile()">Upload</button>
<br>Before+click+upload+look+on+chrome>console>network+(in+this+snipped+we+will+see+404)|113326|113327|文件名自动包含在请求中，服务器可以读取它，“content-type”自动设置为“multipart/form-data”。下面是包含错误处理和附加json发送的更多开发示例|113328|113329|async+function+saveFile(inp)+
{
++++let+user+=+{+name:'john',+age:34+};
++++let+formData+=+new+FormData();
++++let+photo+=+inp.files[0];++++++
+++++++++
++++formData.append("photo",+photo);
++++formData.append("user",+JSON.stringify(user));++
++++
++++try+{
+++++++let+r+=+await+fetch('/upload/image',+{method:+"POST",+body:+formData});+
+++++++console.log('HTTP+response+code:',r.status);+
+++++++alert('success');
++++}+catch(e)+{
+++++++console.log('Huston+we+have+problem...:',+e);
++++}
++++
}|113330|<input+type="file"+onchange="saveFile(this)"+>
<br><br>
Before+selecting+the+file+Open+chrome+console+>+network+tab+to+see+the+request+details.
<br><br>
<small>Because+in+this+example+we+send+request+to+https://stacksnippets.net/upload/image+the+response+code+will+be+404+ofcourse...</small>|113331|113332|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|10|8|@]|9|@]|A|$]]|$1|N|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|S|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|U|$]]

<p>Use pure js</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>async function saveFile() 
{
    let formData = new FormData();           
    formData.append("file", sortpicture.files[0]);
    await fetch('/uploads', {method: "POST", body: formData});    
    alert('works');
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="sortpicture" type="file" name="sortpic" /&gt;
&lt;button id="upload" onclick="saveFile()"&gt;Upload&lt;/button&gt;
&lt;br&gt;Before click upload look on chrome&gt;console&gt;network (in this snipped we will see 404)</code></pre>
</div>
</div>
</p>

<p>The filename is automatically included to request and server can read it, the 'content-type' is automatically set to 'multipart/form-data'. Here is more developed example with error handling and additional json sending</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>async function saveFile(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      
         
    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  
    
    try {
       let r = await fetch('/upload/image', {method: "POST", body: formData}); 
       console.log('HTTP response code:',r.status); 
       alert('success');
    } catch(e) {
       console.log('Huston we have problem...:', e);
    }
    
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="file" onchange="saveFile(this)" &gt;
&lt;br&gt;&lt;br&gt;
Before selecting the file Open chrome console &gt; network tab to see the request details.
&lt;br&gt;&lt;br&gt;
&lt;small&gt;Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...&lt;/small&gt;</code></pre>
</div>
</div>
</p>


<p>I want to implement a simple file upload in my intranet-page, with the smallest setup possible.</p>

<p>This is my HTML part:</p>

<pre><code>&lt;input id="sortpicture" type="file" name="sortpic" /&gt;
&lt;button id="upload"&gt;Upload&lt;/button&gt;
</code></pre>

<p>and this is my JS jquery script:</p>

<pre><code>$("#upload").on("click", function() {
    var file_data = $("#sortpicture").prop("files")[0];   
    var form_data = new FormData();
    form_data.append("file", file_data);
    alert(form_data);
    $.ajax({
        url: "/uploads",
        dataType: 'script',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(){
            alert("works"); 
        }
    });
});
</code></pre>

<p>There is a folder named "uploads" in the root directory of the website, with change permissions for "users" and "IIS_users".</p>

<p>When I select a file with the file-form and press the upload button, the first alert returns "[object FormData]". the second alert doesn't get called and the"uploads" folder is empty too!?</p>

<p>Can someone help my finding out whats wrong?</p>

<p>Also the next step should be, to rename the file with a server side generated name. Maybe someone can give me a solution for this, too.</p>


jQuery AJAX file upload PHP

服务器

jQuery

JSON

我想在我的内联网页面上实现一个简单的文件上传，用尽可能小的设置。这是我的HTML部分：<input id="sortpicture" type="file" name="sortpic" /><button id="upload">Upload</button>这是我的JS jquery脚本：$("#upload")....

问jQuery AJAX文件上传
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery AJAX文件上传EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery AJAX文件上传
EN