0

I want to implement simple file upload with progress
I like the services provides by jQuery-File-Upload
I tested the example provided with script

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<style>
.bar {
    height: 18px;
    background-image: url('img/progressbar.gif');
}
</style>
</head>
<body>
<input type="text" name="textfield" /> title
<input id="fileupload" type="file" name="files[]" data-url="upload.php" >
<a href="#" id="upload" >Upload</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>

    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        },
        progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }
    });

</script>

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>
</body> 
</html>

the code works perfectly when user select file, but I need the following settings

  • Upload file when click on upload button.
  • save information provided with the file in mysql db.
  • upload a second picture along with main file.
  • limit the items to only one file per upload.
  • show upload status ( KB up - time remaining ).

Edited by OsaMasw

3
Contributors
7
Replies
54
Views
4 Years
Discussion Span
Last Post by OsaMasw
0

but I need the following settings

I think you made one minor mistake.

You didn't provide any PHP code with your Jquery code.

I mean I hope you don't expect someone to write this much code:

Upload file when click on upload button.
save information provided with the file in mysql db.
upload a second picture along with main file.
limit the items to only one file per upload.
show upload status ( KB up - time remaining ).

I mean if you did have some PHP code that you have been working on then post what you have.

Edited by LastMitch: grammer

0
  1. Upload file when click on upload button.
  2. save information provided with the file in mysql db.
  3. upload a second picture along with main file.
  4. limit the items to only one file per upload.
  5. show upload status ( KB up - time remaining ).

The demo version of the file upload (BlueImp) does 1, 5.
3,4 seem to contradict each other
2 is server-side handling

This is a considerable amount of info. I realise that you didn't just post this, sat back and are waiting for somebody to do all the work for you, so perhaps you could focus on ONE question to begin with? In addition, show any code that you tried, so we can try to guide you through it.

0

am Sorry for this mistake, I have the php code and its working as I need, but am asking how to implement jQuery plugin with my script\

<?php
include ("config.php");
if ($_POST) {
// "filter" to remove all unwanted charachter from text
$title = filter($_POST['title']);
$info = filter($_POST['info']);
$cat = filter($_POST['cat']);
$siduser = filter($_POST['sid']);
$time = date("Y-m-d H:i:s");

//for file
$fileName = $_FILES["files"]["name"]; // The file name
$fileTmpLoc = $_FILES["files"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["files"]["type"]; // The type of file it is
$fileSize = $_FILES["files"]["size"]; // File size in bytes
$extfile = pathinfo($_FILES['files']['name'], PATHINFO_EXTENSION);

// for pic
$fileNamepic = $_FILES["filepic"]["name"]; 
$fileTmpLocpic = $_FILES["filepic"]["tmp_name"]; 
$fileTypepic = $_FILES["filepic"]["type"]; 
$fileSizepic = $_FILES["filepic"]["size"]; 
$fileErrorMsgpic = $_FILES["filepic"]["error"]; 
$extpic = pathinfo($_FILES['filepic']['name'], PATHINFO_EXTENSION);

// error handling Here is too long :P.
// checking filename and other thing from extension to size.

$hash = date("YmdHis");
$fileName = preg_replace( '/[\x7f-\xff -]/', '', $fileName );
$fileName = $hash."-".$fileName ;
if ($fileNamepic != "" ) {
$fileNamepic = $hash.".".$extpic;
// copy picture with copy_marked to add watermark on it
copy_marked($fileTmpLocpic,"$fileNamepic,$fileTypepic);
} else {
$fileNamepic = "default.jpg";
}
// copy file to server.
move_uploaded_file($fileTmpLoc, "files/$fileName");
// add information to database with function "upload_me".
upload_me ($cat,$siduser,$title,$info,$fileSize,$fileNamepic,$fileName,$time,0);

// Check to make sure the uploaded file is in place where you want it
if (!file_exists("files/$fileName")) {
    echo("File not uploaded");

}
// Display things to the page so you can see what is happening for testing purposes
echo("uploadsuccess");
}
?>
0

its not an error its just a typo,
I read the wiki setup, I dont get it, how to specify allowed extensions ? and I want a trigger to upload , how this can be done in Ajax ?

0

PHP
You can limit the upload with getting the extension from pathinfo(), but maybe safer, you can use finfo_open() to get the mime type. If you're just getting images though, maybe the exif_imagetype()

On the wiki link you need to read this section:

Using jQuery File Upload (UI version) with a custom server-side upload handler

0

Using jQuery File Upload (UI version) with a custom server-side upload handler

read that part and did every step on it, and when its come to set output to json
here I stop :(, from my above upload script how to set output to json ??

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.