JavaScript: Загрузка файла … без файла
Я пытаюсь фальсифицировать загрузку файла, на самом деле не используя вход файла от пользователя. Содержание файла будет динамично сгенерировано от строки.
Действительно ли это возможно? Кто-либо когда-либо делал это прежде? Действительно ли там примеры/теория доступны?
Для разъяснения я знаю, как загрузить файл с помощью методов Ajax с помощью скрытого iframe и друзей - проблема загружает файл, который не находится в форме.
Я использую ExtJS, но jQuery выполним также, так как ExtJS может включить его (ext-jquery-base).
4 ответа
Почему бы просто не использовать XMLHttpRequest () с POST?
function beginQuoteFileUnquoteUpload(data)
{
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://www.mysite.com/myuploadhandler.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function ()
{
if (xhr.readyState == 4 && xhr.status == 200)
alert("File uploaded!");
}
xhr.send("filedata="+encodeURIComponent(data));
}
Сценарий обработчика на сервере просто записывает данные файла в файл.
РЕДАКТИРОВАТЬ
Загрузка файла по-прежнему является HTTP-сообщением с другим типом содержимого. Вы можете использовать этот тип контента и разделить ваш контент границами:
function beginQuoteFileUnquoteUpload(data)
{
// Define a boundary, I stole this from IE but you can use any string AFAIK
var boundary = "---------------------------7da24f2e50046";
var xhr = new XMLHttpRequest();
var body = '--' + boundary + '\r\n'
// Parameter name is "file" and local filename is "temp.txt"
+ 'Content-Disposition: form-data; name="file";'
+ 'filename="temp.txt"\r\n'
// Add the file's mime-type
+ 'Content-type: plain/text\r\n\r\n'
+ data + '\r\n'
+ boundary + '--';
xhr.open("POST", "http://www.mysite.com/myuploadhandler.php", true);
xhr.setRequestHeader(
"Content-type", "multipart/form-data; boundary="+boundary
);
xhr.onreadystatechange = function ()
{
if (xhr.readyState == 4 && xhr.status == 200)
alert("File uploaded!");
}
xhr.send(body);
}
Если вы хотите отправить дополнительные данные, вы просто разделяете каждый раздел границей и описываете заголовки content-disposition и content-type для каждого раздела. Каждый заголовок отделяется новой строкой, а тело отделяется от заголовков дополнительной новой строкой. Естественно, загрузить двоичные данные таким способом будет немного сложнее: -)
Дальнейшее редактирование: забыл упомянуть, убедитесь, что граничная строка отсутствует в текстовом «файле», который вы отправляете, иначе она будет рассматривается как граница.
Загрузка файла - это просто запрос POST с правильно закодированным содержимым файла и специальным заголовком multipart / formdata . Вам необходимо использовать этот , потому что безопасность вашего браузера запрещает вам прямой доступ к диску пользователя.
Поскольку вам не нужно читать пользовательский диск, ДА , вы можете подделать его с помощью Javascript. Это будет просто XMLHttpRequest . Чтобы создать «подлинный» запрос на загрузку, вы можете установить Fiddler и проверить исходящий запрос.
Вам необходимо правильно закодировать этот файл, поэтому эта ссылка может быть очень полезной: RFC 2388: Возвращение значений из форм: multipart / form-data
Я только что поймал эту строку POST_DATA с дополнением Firefox TamperData. Я отправил форму с одним полем type="file" с именем "my file" и кнопкой submit с именем "btn-submit" со значением "Upload". Содержимое загруженного файла имеет вид
Line One
Line Two
Line Three
Так что вот строка POST_DATA:
-----------------------------192642264827446\r\n
Content-Disposition: form-data; \n
name="myfile"; filename="local-file-name.txt"\r\n
Content-Type: text/plain\r\n
\r\n
Line \n
One\r\n
Line Two\r\n
Line Three\r\n
\r\n
-----------------------------192642264827446\n
\r\n
Content-Disposition: form-data; name="btn-submit"\r\n
\r\n
Upload\n
\r\n
-----------------------------192642264827446--\r\n
Я не знаю, что означает это число (192642264827446), но это не должно быть слишком сложно выяснить.
Просто делюсь конечным результатом, который работает - и имеет чистый способ добавления/удаления параметров без жесткого кодирования чего-либо.
var boundary = '-----------------------------' +
Math.floor(Math.random() * Math.pow(10, 8));
/* Parameters go here */
var params = {
file: {
type: 'text/plain',
filename: Path.utils.basename(currentTab.id),
content: GET_CONTENT() /* File content goes here */
},
action: 'upload',
overwrite: 'true',
destination: '/'
};
var content = [];
for(var i in params) {
content.push('--' + boundary);
var mimeHeader = 'Content-Disposition: form-data; name="'+i+'"; ';
if(params[i].filename)
mimeHeader += 'filename="'+ params[i].filename +'";';
content.push(mimeHeader);
if(params[i].type)
content.push('Content-Type: ' + params[i].type);
content.push('');
content.push(params[i].content || params[i]);
};
/* Use your favorite toolkit here */
/* it should still work if you can control headers and POST raw data */
Ext.Ajax.request({
method: 'POST',
url: 'www.example.com/upload.php',
jsonData: content.join('\r\n'),
headers: {
'Content-Type': 'multipart/form-data; boundary=' + boundary,
'Content-Length': content.length
}
});
Это было протестировано для работы на всех современных браузерах, включая, но не ограничиваясь:
- IE6+
- FF 1.5+
- Opera 9+
- Chrome 1.0+
- Safari 3. 0+